首页 > 编程语言 > 详细

JavaScript常见兼容问题解决

时间:2017-10-29 00:13:51      阅读:376      评论:0      收藏:0      [点我收藏+]

 JS兼容问题

//事件对象的获取

document.onclick = function(e){

  var _e = window.event || e;

}

document.onkeydown = function(event){

  var code = event.keyCode || event.which; //兼容性问题

  alert(event.which); // <IE9不支持

}

//事件委托

list.onclick = function(e){

  var _e = window.event||e;

  var _t = _e.target||_e.srcElement;//事件委托

  if(_t.tagName.toLowerCase()=="li"){

    alert(_t.innerHTML)

  }

}

btn.onclick = function(e){

  var _e = window.event || e;

  //_e.target 代表的是按钮的节点对象和btn一样

  var _t = _e.target||_e.srcElement;

  console.log(_t.id)

}

 

//屏幕的高度

document.body.clientHeight (Chrome)|| document.documentElement.clientHeight(IEFF

//阻止事件冒泡(前提是获取事件对象_e)

if(_e.stopPropagation){

  _e.stopPropagation();

}else{

  _e.cancelBubble = true;

}

什么时候用阻止事件冒泡?

例如:document上有A事件,divB事件,div里面的spanC事件,如果不给spandiv加阻止事件冒泡的话,点击span时就会触发到divB事件、documentA事件,当点击span时不想触发divdocument的事件就要加上阻止事件冒泡,div也是一样的道理。

//阻止默认行为

if(_e.preventDefault){  //标准处理方式

  _e.preventDefault();

}else{ //Ie处理方式

  _e.returnValue = false;

}

alert(); 鼠标右击;submita链接 

/*

  事件监听绑定事件兼容处理

  参数

  objNode    事件目标

  eventName  事件名称       如:click  mouseenter

  fn         事件处理程序  函数

 */

function on(objNode,eventName,fn){

  if(objNode.addEventListener){  //标准模式

    objNode.addEventListener(eventName,fn);

  }else{  //IE8及以下模式

    objNode.attachEvent("on"+eventName,fn);

  }

}

function out(target,eventName,fn){

  if(target.removeEventListener){

    target.removeEventListener(eventName,fn);

  }else{

    target.detachEvent("on"+eventName,fn)

  }

}

 

/*

  事件监听绑定事件兼容处理

  参数

  objNode    事件目标

  eventName  事件名称       如:click  mouseenter

  fn         事件处理程序  函数

*/

function on(objNode,eventName,fn){

  if(objNode.addEventListener){  //标准模式

    objNode.addEventListener(eventName,fn);

  }else{//IE8及以下模式

    objNode.attachEvent("on"+eventName,fn);

  }

}

function handler(e){

  //console.log(e)

  //滚轮方向  事件对象.wheelDelta   120↑  -120 非火狐

  //滚轮方向  事件对象.detail   -3↑  3 火狐

  if(e.wheelDelta==120||e.detail==-3){

    alert("向上");

  }else{

    alert("向下")

  }

}

 

on(document,"DOMMouseScroll",handler)  //Firefox

on(document,"mousewheel",handler)  //Firefox

 

/*

获取任意【节点对象】的任意的样式【属性】的值

dom  节点对象

pName  样式属性名  "aaa"    

*/

function getStyleValue(dom, pName) {

  if (window.getComputedStyle) { //标准模式

    return window.getComputedStyle(dom, null)[pName];

  } else { //IE低版本

  //dom.currentStyle     样式对象

  return dom.currentStyle[pName];

  }

}

 

//获取css样式函数以及透明度兼容

function getStyle(obj, attr){

  //获取对象obj的属性attr的值

  //大小,宽高,位移

  if(obj.currentStyle){ //IE浏览器的一个属性,返回的是CSS样式对象

    return obj.currentStyle[attr];

  }else{

    return getComputedStyle(obj)[attr]; //获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式对象([object CSSStyleDeclaration])

  }

}

 

function getStyleOpacity(obj, attr){

  var iCur = 0;

  //去掉样式的单位

  if(attr == "opacity"){

    iCur = parseFloat(getStyle(obj, attr)) * 100;

  }else{

    iCur = parseFloat(getStyle(obj, attr))

  }

}

 

 

//ajax创建请求数据

if(window.XMLHttpRequest){

  xhr = new XMLHttpRequest();  //标准

}else{

  xhr = new ActiveXObject("Microsoft.XMLHTTP");  //IE6

}

 

JavaScript常见兼容问题解决

原文:http://www.cnblogs.com/paul0705/p/7748571.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!