js中的⼀些兼容性问题
js中的⼀些兼容性问题:
1）获取滚动⾼度：
document.documentElement.scrollTop||document.body.scrollTop
2）获取样式兼容：
解决⽅法：
function getStyle(dom, styleName){
return dom.currentStyle ? dom.currentStyle[styleName] : getComputedStyle(dom)[styleName];
}
3）事件对象兼容
window.event只能在IE下运⾏，⽽不能在Firefox下运⾏，这是因为Firefox的event只能在事件发⽣的现场使⽤。Firefox必须从源处加⼊event作参数传递。IE忽略该参数，⽤window.event来读取该event。
解决⽅法：
event = event || window.event;
4）event.pageX和event.pageY：获取⿏标相对于整个⽂档的⽔平及垂直坐标
event.pageX和event.pageY，IE9之前的版本不⽀持
  解决⽅法：
    event.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft);
    event.clientY+(document.documentElement.scrollTop||document.body.scrollTop);
5）阻⽌事件冒泡兼容
  stopPropagation()和cancelBubble，前者是⽅法，是标准的写法，后者是属性，赋值true表⽰阻⽌，是IE的写法。
  解决⽅法：
    判断stopPropagation是否存在，如果存在则⽤标准写法否则则⽤IE的写法，不可反过来判断。
    event.stopPropagation ? event.stopPropagation() : event.cancelBubble=true;
6）阻⽌默认⾏为兼容
  preventDefault()和returnValue()前者标准写法，后者IE写法。
  解决⽅法：
  （常规⽅法）event.preventDefault?event.preventDefault():urnValue=false;
  　或者（⾮常规⽅法）直接在事件处理程序中return false;
7）事件监听兼容
  标准浏览器的写法addEventListener()和IE的写法attachEvent()。
  解决⽅法：
    判断addEventListener是否存在，如果存在则⽤否则⽤IE8以下的版本（含IE8）的绑定⽅
法attachEvent，removeEventListener()和detachEvent()也是⼀样的⽤法。
    if(document.all){
      dom.attactEvent(“onclick”, fn);
    } else {
    dom.addEventListener(“click”, fn);
    }
8）ElementByClassName()：根据类名查元素，返回集合（IE9及以上版本⽀持）
  解决⽅法：
  function getByClassName(className, context) {
  context = context || document;
  if (ElementsByClassName) //浏览器⽀持使⽤getElementsByClassName
  ElementsByClassName(className);
  /*不⽀持使⽤getElementsByClassName */
  //保存查到的元素的数组
  var result = [];
  //查context后代的所有元素
  var allTags = ElementsByTagName("*");
  //遍历所有的元素
  for(var i = 0, len = allTags.length; i < len; i++) {
//获取当前遍历元素使⽤的所有class类名
var classNames = allTags[i].className.split(" ");
/js控制滚动条
/遍历当前元素的所有类名，和待查的类名⽐较
for (var j = 0, l = classNames.length; j < l; j++) {
if (classNames[j] == className) { //当前所在遍历的元素是要查出来的其中⼀个
result.push(allTags[i]);
break;
}
}
}
//返回查结果
return result;
}
9）事件⽬标对象兼容
IE下,event对象有srcElement属性，但是没有target属性;Firefox下,event对象有target属性，但是没有srcElement属性  解决⽅法：
  var t = event.target || event.srcElement;
10)获取浏览器窗⼝⼤⼩的三种⽅法（浏览器的视⼝，不包括⼯具栏和滚动条）。
  对于Internet Explorer、Chrome、Firefox、Opera以及Safari：
  window.innerHeight–浏览器窗⼝的内部⾼度
  window.innerWidth–浏览器窗⼝的内部宽度
  对于Internet Explorer 8、7、6、5：
  document.documentElement.clientHeight
  document.documentElement.clientWidth
  或者
  document.body.clientHeight
  document.body.clientWidth
解决⽅法：
  window.innerHeight || document.documentElement.clientHeight
  window.innerWidth || document.documentElement.clientWidth

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。