js一些常见的兼容问题
整理了一些一些js兼容问题:
1.非行内样式的获取:
正常浏览器(chrome,FF):getComputedStyle(element,false)+attr
封装函数(兼容写法):
function getStyle(ele,attr){ var a = ""; if(ele.currentStyle){ //IE a = ele.currentStyle[attr]; }else{ a = getComputedStyle(ele,false)[attr]; //正常 }
2.获取事件对象:
obox.onclick=function(eve){ var e=eve||window.event; console.log(e) }
3.阻止事件冒泡:
事件冒泡:当触发元素的某个事件时,他会先触发自己的对应事件,然 后依次向上触发所有父级的相同事件; 上一父级没有相同事件,继续向上触发;
IE: event.cancelBubble=true
其他浏览器:event.stopPropagation()
function stopBubble(e){ if(e.stopPropagation){ e.stopPropagation(); //正常 }else{ e.cancelBubble = true; //IE } }
4.事件委托:
事件委托:将多个相同元素的相同事件,添加给页面上现存的共同的父元素,利用事件冒泡,配合事件源找到真正的点击元素。
IE:event.srcElement
function tar(t){ var t = e.target || e.srcElement; }
5.添加事件绑定方式:
事件绑定方式有两种:赋值式和监听式
(1)赋值式: (DOM 0级事件绑定)
它比较常用,没兼容问题
例子:obox.onclick=function(){}
(2)监听式: (DOM 2级事件绑定)
IE : element.attachEvent("on"+type,cb)
function addEvent(ele,type,cb){ if(ele.addEventListener){ ele.addEventListener(type,cb) //监听式:正常 }else if(ele.attachEvent){ ele.attachEvent("on"+type,cb) //监听式:IE }else{ ele["on"+type] = cb; //赋值式 } }
6.删除事件绑定方式:
同样的,事件绑定方式的删除对应
(1)删除赋值式事件绑定
例子:obox.onclick=null
(2)删除监听式事件绑定:
IE : element.detachEvent("on"+type,cb)
function removeEvent(ele,type,cb){ if(ele.removeEventListener){ ele.removeEventListener(type,cb) //监听式:正常的删除 }else if(ele.detachEvent){ ele.detachEvent("on"+type,cb) //监听式:IE的删除 }else{ ele["on"+type] = null; //赋值式的删除 } }
7.键盘事件的键值获取:
IE : event.which
function code(eve){ var e=eve||window.event; //先获取事件 var code=e.keyCode||e.which; //再获取键值 }
8.阻止默认事件:
IE : event.returnValue = false
function stopDefault(e){ if(e.preventDefault){ e.preventDefault() //正常 }else{ e.returnValue = false; //IE } }
9.鼠标的页面位置pageX,pageY:
function getPage(e) { var pageX = e.pageX || e.clientX + getScroll().scrollLeft; var pageY = e.pageY || e.clientY + getScroll().scrollTop; return { pageX: pageX, pageY: pageY } }
10.滚轮移动距离scrollTop:
function getScroll() { if (document.documentElement.scrollTop) { return document.documentElement.scrollTop; } else if (document.body.scrollTop) { return document.body.scrollTop; }
11.严格模式的开启:
;(function(){"use strict"})();

浙公网安备 33010602011771号