zoukankan      html  css  js  c++  java
  • JavaScript跨浏览器兼容之事件

    (不定期更新!!!)

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

    内容速览:

    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 < 9.5 
                            ? -event.wheelDelta 
                            : event.wheelDelta);
                } else {
                    return -event.detail * 40;
                }
            },
    
            //获取字符编码
            getCharCode: function (event) {
                if (typeof event.charCode =="number") {
                    return event.charCode;
                } else {
                    return event.keyCode;
                }
            },
        }
  • 相关阅读:
    Mybaits源码分析九之sql执行流程
    Mybaits源码分析八之sqlSessiion的openSession方法
    Mybaits源码分析七之XMLConfigBuilder类mappers标签解析
    Mybaits源码分析六之XMLConfigBuilder类 environments标签解析
    Mybaits源码分析五之XMLConfigBuilder类 typeAliases 标签解析
    Mybaits源码分析四之XMLConfigBuilder类settings 标签解析
    ajax与axios与fetch的比较
    if else的优化
    js 类型
    模板字符串
  • 原文地址:https://www.cnblogs.com/suiucat/p/9750553.html
Copyright © 2011-2022 走看看