关闭

原生js兼容写法_在ie标准下的兼容性写法

时间: 2018-04-18阅读: 2027标签: 兼容

经常使用原生js,就要考虑到一些浏览器上的兼容,尤其是IE,下面就整理关于js的一些兼容性写法,原文来源:https://www.cnblogs.com/cy1121/p/5891904.html


1、添加事件方法

addHandler:function(element,type,handler){
    if(element.addEventListener){//检测是否为DOM2级方法
        element.addEventListener(type, handler, false);
    }else if (element.attachEvent){//检测是否为IE级方法
        element.attachEvent("on" + type, handler);
    } else {//检测是否为DOM0级方法
        element["on" + type] = handler;
    }
}


2、移除之前添加的事件方法

removeHandler:function(element, type, handler){
       if (element.removeEventListener){
           element.removeEventListener(type, handler, false);
       } else if (element.detachEvent){
           element.detachEvent("on" + type, handler);
       } else {
           element["on" + type] = null;
       }
}
 
3、获取事件及事件对象目标
//获取事件对象的兼容性写法
 getEvent: function(event){
     return event ? event : window.event;
 },
 //获取事件对象目标的兼容性写法
 getTarget: function(event){
     return event.target || event.srcElement;
 }


4、阻止浏览器默认事件的兼容性写法

preventDefault: function(event){
        if (event.preventDefault){
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
}


5、阻止事件冒泡的兼容性写法

stopPropagation: function(event){
        if (event.stopPropagation){
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
}


6、mouseover和mouseout 事件才包含的获取相关元素的方法

//mouseover和mouseout 事件才包含的获取相关元素的方法
getRelatedTarget: function(event){
    if (event.relatedTarget){
        return event.relatedTarget;
    } else if (event.toElement){
        return event.toElement;
    } else if (event.fromElement){
        return event.fromElement;
    } else {
        return null;
    }
}


7、鼠标滚轮判断

对于mousedown 和mouseup 事件来说,则在其event 对象存在一个button 属性, 表示按下或释放的按钮。

DOM的button 属性可能有如下3 个值:0 表示主鼠标按钮,1 表示中间的鼠 标按钮(鼠标滚轮按钮),2 表示次鼠标按钮。在常规的设置中,主鼠标按钮就是鼠标左键,而次鼠标 按钮就是鼠标右键。 IE8 及之前版本也提供了button 属性,但这个属性的值与DOM 的button 属性有很大差异。

0:表示没有按下按钮。
1:表示按下了主鼠标按钮。 
2:表示按下了次鼠标按钮。 
3:表示同时按下了主、次鼠标按钮。 
4:表示按下了中间的鼠标按钮。 
5:表示同时按下了主鼠标按钮和中间的鼠标按钮。 
6:表示同时按下了次鼠标按钮和中间的鼠标按钮。 
7:表示同时按下了三个鼠标按钮。
getButton: function(event){
    if (document.implementation.hasFeature("MouseEvents", "2.0")){
        return event.button;
    } else {
        switch(event.button){
            case 0:
            case 1:
            case 3:
            case 5:
            case 7:
            return 0;
            case 2:
            case 6:
            return 2;
            case 4:
            return 1;
        }
    }
}

8、能够取得鼠标滚轮增量值(delta)的方法

getWheelDelta: function(event){
    if (event.wheelDelta){
        return (client.engine.opera && client.engine.opera < 9.5 ?
            -event.wheelDelta : event.wheelDelta);
    } else {
        return -event.detail * 40;//firefox中的值为+3表示向上滚,-3表示向下滚
    }
}


9、跨浏览器的方式取得字符编码

getCharCode: function(event){
    if (typeof event.charCode == "number"){
        return event.charCode;
    } else {
        return event.keyCode;
    }
}


10、访问剪贴板中的数据

getClipboardText: function(event){
        var clipboardData = (event.clipboardData || window.clipboardData);
        return clipboardData.getData("text");
 }


11.设置剪贴板中的数据

setClipboardText: function(event, value){
        if (event.clipboardData){
            return event.clipboardData.setData("text/plain", value);
        } else if (window.clipboardData){
            return window.clipboardData.setData("text", value);
        }
 }



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/665

CSS/CSS3常用的样式兼容,样式总结

这篇文章主要介绍了css中常用但是又难记的样式作为总结,方便大家学习和使用。包括了‘单行缩略号‘、’css圆角兼容’、‘元素阴影’,‘border取消宽度影响’,‘css3的背景渐变’,‘css的透明’等等

解决低版本IE下,console报错未定义

因为公司常常要求支持IE浏览器,测试人员会使用低版本的IE进行操作。如果js代码中含有console.log进行调试,在低版本IE下会报错

X5内核浏览器,video兼容

使用vue-video-player在移动端微信内置浏览器打开,点击视频自动全屏问题。 参考官方 API 是 H5 同层浏览器的原因,可通过设置video属性来处理。

谈谈浏览器兼容性问题

为什么浏览器会存在兼容问题?同一浏览器,版本越老,存在bug越多,相对于版本越新的浏览器,对新属性和标签、新特性支持越少。

js中的兼容问题汇总

在使用js的过程中,往往会发现关于IE浏览器的兼容问题,当然微软现在自己也打算抛弃IE,推出了edge浏览器,对于前端来说是个好消息.但IE的用户占比仍然不容小觑,因此这里整理下常见的几个兼容问题附上解决方案,以免不时之需.

web浏览器在线兼容性测试工具_检测html网页在不同浏览器上的兼容问题

对于web前端开发者而言,为了确保html代码在不同浏览器上能正常工作,是一件很麻烦的事情,幸运的是,有很多优秀的工具可以帮助测试浏览器的兼容性,下面就为大家推荐一下比较流行的web浏览器在线兼容性测试工具。

解决IE不兼容document.getElementByClassName()的实现方法

在使用原生js时候,需要通过class样式名来获取dom对象,发现在IE8以下是不支持document.getElementByClassName()这种方法的。那么我们如何来实现获取classname的兼容写法呢?

前端常见的CSS兼容性问题

双倍浮动BUG;表单元素行高不一致;IE6(默认16px为最小)不识别较小高度的标签(一般为10px);图片添加超链接时,在IE浏览器中会有蓝色的边框;最小高度min-height不兼容IE6

谈谈浏览器的兼容性(面试题)

H5新标签在IE9以下的浏览器识别 ;ul标签内外边距问题ul标签在IE6\\\\IE7中,有个默认的外边距,但是在IE8以上及其他浏览器中有个默认的内边距。解决方法:统一设置ul的内外边距为0

低版本IE兼容汇总

JSON未定义;IE8下jquery报错:意外地调用了方法或属性访问;IE10以下不支持placeholder属性;IE7、8 parseInt处理0开头字符串异常问题;IE报错缺少标识符、字符串或数字

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!