北京WEB前端培训
在线咨询 电话咨询 校区地址

课程

环境

就业

试听

企业培训

扫码
关注

首页 / 

行业资讯

北京web前端开发培训 javascript中常遇到的兼容问题的解决方法(下)

时间: 来源:火星人

获取元素的非行间样式值:
//获取元素的非行间样式值
function getStyle(object,oCss) {
    if (object.currentStyle) {
        return object.currentStyle[oCss];//IE
    }else{
        return getComputedStyle(object,null)[oCss];//除了IE
    }
}


//设置监听事件 function addEvent(obj,type,fn){//添加事件监听,三个参数分别为 对象、事件类型、事件处理函数,默认为false
    if (obj.addEventListener) {
          obj.addEventListener(type,fn,false);//非IE
    } else{
         obj.attachEvent('on'+type,fn);//ie,这里已经加上on,传参的时候注意不要重复加了
    };

} function removeEvent(obj,type,fn){//删除事件监听
    if (obj.removeEventListener) {
          obj.removeEventListener(type,fn,false);//非IE
    } else{
         obj.detachEvent('on'+type,fn);//ie,这里已经加上on,传参的时候注意不要重复加了
    };
}

元素到浏览器边缘的距离:
//在这里加个元素到浏览器边缘的距离,很实用
function offsetTL(obj){//获取元素内容距离浏览器边框的距离(含边框)
    var ofL=0,ofT=0;
    while(obj){
         ofL+=obj.offsetLeft+obj.clientLeft;
         ofT+=obj.offsetTop+obj.clientTop;
         obj=obj.offsetParent;
     }
     return{left:ofL,top:ofT};
}

阻止事件传播:

//js阻止事件传播,这里使用click事件为例
document.onclick=function(e){
    var e=e||window.event;
    if (e.stopPropagation) {
         e.stopPropagation();//W3C标准
    }else{
         e.cancelBubble=true;//IE....
     }
}

阻止默认事件:
//js阻止默认事件
document.onclick=function(e){
     var e=e||window.event;
    if (e.preventDefault) {
        e.preventDefault();//W3C标准
     }else{
        e.returnValue='false';//IE..
    }
}

关于EVENT事件中的target:
//关于event事件中的target
document.onmouseover=function(e){
    var e=e||window.event;
    var Target=e.target||e.srcElement;//获取target的兼容写法,后面的为IE
    var from=e.relatedTarget||e.formElement;//鼠标来的地方,同样后面的为IE...
    var to=e.relatedTarget||e.toElement;//鼠标去的地方
}

鼠标滚轮滚动事件:

//鼠标滚轮事件
//火狐中的滚轮事件
document.addEventListener("DOMMouseScroll",function(event){
     alert(event.detail);//若前滚的话为 -3,后滚的话为 3
},false)
//非火狐中的滚轮事件
document.onmousewheel=function(event){
    alert(event.detail);//前滚:120,后滚:-120
}

节点加载:
//火狐下特有的节点加载事件,就是节点加载完才执行,和onload不同
//感觉用到的不多,直接把js代码放在页面结构后面一样能实现。。
document.addEventListener('DOMContentLoaded',function ( ){},false);//DOM加载完成。好像除IE6-8都可以.

转自博客园>骑猪敲代码的微薄,感谢作者分享

关键词:北京web前端培训,北京前端培训,web前端开发培训

热门课程推荐  点击查看全部课程

北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
北京UI培训
  • 14年教育品牌
  • 课程不断更新
  • 签订就业协议
  • 项目案例讲解
  • O2O教学模式

北京火星人科技文化发展中心版权所有 Copyright & copy 2002-2016 2ds.cn, All Rights Reserved 京ICP备 10216795号