JS中的一些兼容性问题(可直接使用)
程序员文章站
2022-04-27 18:49:48
...
文章目录
每个浏览器不同的内核,不同的处理引擎,不同的渲染引擎就会导致写同一条样式的时候出现差异,这个现象叫做兼容。
因此我整理出一些在编写JS中所需要的兼容性写法,可直接保存到public.js当中,当需要用到时,直接调用出来。
1.关于获取非行内样式的兼容
function getStyle(ele,attr){
if(ele.currentStyle){
return ele.currentStyle[attr];
}else{
return getComputedStyle(ele,false)[attr];
}
}
2.关于阻止事件冒泡的兼容
function stopBubble(e){
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}
取消事件冒泡有两种方式:
- 标准的W3C
方式:e.stopPropagation();这里的stopPropagation是标准的事件对象的一个方法,调用即可(谷歌和火狐支持,IE不支持) - 非标准的IE方式:window.event.cancelBubble=true;这里的cancelBubble是IE事件对象的属性,设为true就可以了(IE特有的,谷歌支持,火狐不支持)
3.关于阻止默认事件的兼容
function stopDefault(e){
if(e.preventDefault){
e.preventDefault()
}else{
e.returnValue = false;
}
}
4.关于事件源的兼容
function fn(eve){
var e=eve|| window.event;
e.target ||e.srcElement;
}
5.关于键盘事件的兼容
document.onkeypress=function(eve){
var e=eve|| window.event;
e.keyCode||e.which;
}
6.关于绑定2级事件监听的兼容
function add(eve){
var e=eve|| window.event;
if(e.addEventListener){
return e.addEventListener(事件,事件处理函数,false );
}else{
e.attachEvent("on"+事件,事件处理函数)
}
}
7.关于事件监听移除的兼容
if (e.removeEventListener){
e.removeEventListener(事件,事件处理函数,false)
}else{
e.detachEvent("on"+事件,事件处理函数);
}
8.关于事件委托的封装
oul.onclick=fn(achild,callback);
function fn(achild,callback){
return function(eve){
var e=eve|| window.event;
//事件源的兼容
var target=eve.target||eve.srcElement;
for(var i=0;i<achild.length;i++){
if(child===target){
callback.bind(target)(); //把自身绑定到事件源返回,此时回调函数的this就是事件源
}
}
}
}
上一篇: 兼容案例:封装innerText和textContent
下一篇: Lua代码风格