JavaScript跨浏览器兼容之事件

2021-05-15 21:29

阅读:373

标签:cas   null   def   目标   支持   事件处理   mouse   arc   保存   

(不定期更新!!!)

说明:常见的事件跨浏览器兼容。

内容速览:

  1. 添加事件处理函数    addHandler
  2. 移除事件处理函数    removeHandler
  3. 获取event对象         getEvent
  4. 事件的目标              getTarget
  5. 取消事件默认行为   preventDefault
  6. 阻止事件冒泡          stopPropagation
  7. 获取事件相关属性   getRelatedTarget
  8. 获取鼠标按钮          getButton
  9. 获取鼠标滚动时,显示保存有关鼠标信息的detail属性值    getWheelDelta
  10. 获取字符编码         getCharCode

----------------------------------------------------------------------------------------我是华丽的分割线------------------------------------------------------------------------------------------------------------------------------------------------------------------

 //跨浏览器事件兼容对象
    var EventUtil = {
        //添加事件处理函数
        addHandler: function (element, type, handler) {

        },

        //移除事件处理函数
        removeHandler: function (element,type,handler) {

        },

        //获取event对象
        getEvent: function (event) {
            // event = event || window.event;
            return event ? event : window.event;
        },

        //获取事件的目标(例如触发事件的具体是鼠标事件还是滚动事件)
        getTarget: function (event) {
            return event.target || event.srcElement;
        },

        //取消事件的默认行为
        preventDefault: function (event) {
            if (event.preventDefault) {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
        },

        //阻止事件冒泡
        stopPropagation: function (event) {
            if (event.stopPropagation) {
                event.stopPropagation();//阻止事件流
            } else {
                event.cancelBubble = true;//IE不支持事件捕获
            }
        },

        //获取相关属性
        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;
            }
        },

        //获取鼠标按钮
        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;

                }
            }
        },

        //鼠标滚动时,显示保存有关鼠标信息的detail属性值
        getWheelDelta: function (event) {
            if ( event.wheelDelta) {
                //解决浏览器是否在Opera 9.5 之前版本的兼容性
                return (client.engine.opera && client.engine.opera event.wheelDelta 
                        : event.wheelDelta);
            } else {
                return -event.detail * 40;
            }
        },

        //获取字符编码
        getCharCode: function (event) {
            if (typeof event.charCode =="number") {
                return event.charCode;
            } else {
                return event.keyCode;
            }
        },
    }

 

JavaScript跨浏览器兼容之事件

标签:cas   null   def   目标   支持   事件处理   mouse   arc   保存   

原文地址:https://www.cnblogs.com/suiucat/p/9750553.html


评论


亲,登录后才可以留言!