美文网首页
js事件中的一些兼容写法总结

js事件中的一些兼容写法总结

作者: 秃头成就技术 | 来源:发表于2018-09-15 09:49 被阅读40次

事件中兼容还是挺多的,这里稍微总结下,大家还得多看多背才能熟记

1.获取行内样式兼容

function getStyle(ele,attr){

if(window.getComputedStyle){

//通常方法获取

return window.getComputedStyle(ele,false)[attr];

}else{

//ie兼容

return ele.currentStyle[attr];

}

}


2.键盘事件keycode兼容

keycode 不区分大小写, 返回大写的英文字母的ASCII编码

ie写法:e.which

         var keyCode = e.keyCode || e.which;


3.阻止浏览器默认行为

var preventDefault = function(){

    if(event.preventDefault){

        event.preventDefault();

//ie写法

    }else{

        event.returnValue = false;

    }

}

或return false/0  

---jquery 中return false 不仅会阻止浏览器默认行为,还会阻止冒泡

--- 如果函数以后想反回布尔类型的值, 用0和1代替


4.事件委托和event兼容

var getEvent = function(event){

    event = event || window.event;

事件委托:(event.srcElement:ie写法)

    return event.target || event.srcElement;

}


5.阻止事件冒泡兼容

btn.onclick = function (ev) {

            ev = ev || window.event;

//通常写法

            if(ev.stopPropagation) {

                ev.stopPropagation();

            } else {

//ie写法

                ev.cancelBubble = true;

            }

        }


6.事件绑定监听事件兼容

var handle = {

//调用使用事件绑定

            addHandle: function(ele, type, event) {

//浏览器当有addEventListener事件,执行,否则执行下面

                if(ele.addEventListener) {

                    ele.addEventListener(type, event, false);

//浏览器当有attachEvent事件,执行,否则执行下面

                } else if(ele.attachEvent) {

//ie要注意事件类型要  加on

                    ele.attachEvent('on' + type, event);

                } else {

                  ele['on' +type] = event;

                }

            },

//移除监听

            removeHandle: function(ele, type, event) {

//浏览器当有removeEventListener事件,执行,否则执行下面

                if(ele.removeEventListener) {

                    ele.removeEventListener(type, event, false);

//浏览器当有detachEven事件,执行,否则执行下面

                }  else if(ele.detachEvent) {

                    ele.detachEvent('on' + type, event);

                } else {

                  ele['on' +type] = null;

                }

            }

        }

相关文章

  • js事件中的一些兼容写法总结

    事件中兼容还是挺多的,这里稍微总结下,大家还得多看多背才能熟记 1.获取行内样式兼容 function getSt...

  • javascript 事件兼容

    今天了解了js 的事件,以前写代码时并不会在意它的兼容问题,那么今天总结几个关于事件的兼容写法。 1、js中经常用...

  • js中常见的兼容问题及其解决方法

    在编写js的代码时,总会遇到一些兼容问题,下面来总结一些常见的兼容写法: 1.获取样式的兼容写法: A. 非IE浏...

  • js事件兼容写法

    title: js事件兼容写法date: 2017-11-16 21:58:30tags: js文件下载:

  • JS中的兼容写法

    判断用户输入事件 正常浏览器:oninput ie678 支持:onpropertychange 封装自己clas...

  • 无标题文章

    总结小程序 1小程序是微信全新定义的规范,是基于xml+js的,不支持也不兼容HTML,兼容受限的部分CSS写法。...

  • js forEach map &&&

    原生JS forEach()和map()遍历的区别以及兼容写法 一、原生JS forEach() 和map()**...

  • js常见的事件兼容性写法

    1:获取事件及事件对象 x.onclick=function(ev){ var event=ev||window....

  • js几个绕不开的事件兼容写法

    1、键盘事件 keyCode 兼容性写法 2、求窗口大小的兼容写法 当我们获取滚动条滚动距离时:IE,Chrome...

  • JavaScript事件的一些兼容写法

    绑定事件 addEventListener: W3C标准写法IE不兼容 attachEvent:兼容IE两者间的...

网友评论

      本文标题:js事件中的一些兼容写法总结

      本文链接:https://www.haomeiwen.com/subject/mjszgftx.html