跨浏览器鼠标事件写法

最新推荐文章于 2024-01-21 20:09:39 发布

paper_crane

最新推荐文章于 2024-01-21 20:09:39 发布

阅读量318

点赞数

分类专栏： JavaScript学习笔记文章标签： javascript 跨浏览器兼容性鼠标事件

本文链接：https://blog.csdn.net/zhangwx6/article/details/62318018

版权

JavaScript学习笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

以下兼容性代码实例来自《JavaScript高级程序设计》第三版，测试代码由本人编写：

var EventUtil = {
    // 添加绑定事件
    // 第一个条件兼容dom2级事件，可为同一个事件（如click）添加多个响应函数
    // 第一个条件兼容IE，IE没有事件捕获，只有事件冒泡
    // 第三个条件是dom0级事件，最原始的事件，同一事件只能有一个响应函数
    addHandler: function(element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent('on' + type, handler);
        } else {
            element['on' + type] = handler;
        }
    },
    // 移除绑定事件，与添加绑定事件相反
    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;
        }
    },
    // 获取时间，IE没有event事件对象，只有window.event作为window的属性
    getEvent: function(event) {
        return event ? event : window.event;
    },
    // 获取事件的目标元素，IE的为srcElement
    getTarget: function(event) {
        return event.target || event.srcElement;
    },
    // 禁止默认事件，例如点击链接跳转
    // IE没有此函数接口，但是window.event有一个returnValue属性，将此属性设为false即可达到相同的效果
    preventDefault: function(event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },
    // 禁止事件冒泡和捕获，IE中只能禁止事件冒泡
    // 同上，IE没有此函数接口，但是window.event有一个cancelBubble属性值
    stopPropagation: function(event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    },
    // 获取事件相关的属性，只在mouseover和mouseout事件时此属性的值为相关元素，对于其他事件，此属性值为null
    // IE此属性名为fromElement
    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;
        }
    },
    // 获取鼠标点击事件的按键
    // IE有比较多可能
    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;
            }
        }
    },
    // 判断鼠标滚轮是向上还是向下，往用户方向滑是负值，反之则正值
    getWheelDelta: function(event) {
        if (event.wheelDelta) {
            // 下面的Opera判断还无法确认正确与否，有时间再测试
            if (navigator.userAgent.indexOf('Opera') && window.opera.version < 9.5) {
                return -event.wheelDelta;
            } else {
                return event.wheelDelta;
            }
            // return (client.engine.opera && client.engine.opera < 9.5 ?
            //     -event.wheelDelta : event.wheelDelta);
        } else {
            return -event.detail * 40;
        }
    }
};

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标事件跨浏览器写法</title>
    <script src="./scripts/compatible.js"></script>
    <style>
        #container {
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div id="container">
        <input id="myButton" type="button" value="click me">
    </div>
    <script>
        var button = document.getElementById('myButton');
        var container = document.getElementById('container');

        var handler = function(event) {
            event = EventUtil.getEvent(event);
            var target,
                relatedElement;
            switch(event.type) {
                case 'click':
                    // 获取目标元素，应为button
                    target = EventUtil.getTarget(event);
                    target.value = 'click me';
                    // 获取鼠标点击的按键
                    alert(EventUtil.getButton(event));
                    break;
                case 'mouseover':
                    target = EventUtil.getTarget(event);
                    target.value = 'mouse over';
                    // 获取相关元素
                    relatedElement = EventUtil.getRelatedTarget(event);
                    relatedElement.style.backgroundColor = 'red';
                    break;
                case 'mouseout':
                    target = EventUtil.getTarget(event);
                    target.value = 'mouse out';
                    // 获取相关元素
                    relatedElement = EventUtil.getRelatedTarget(event);
                    relatedElement.style.backgroundColor = '';
                    break;
            }
        }

        // 添加绑定事件
        EventUtil.addHandler(button, 'click', handler);
        EventUtil.addHandler(button, 'mouseover', handler);
        EventUtil.addHandler(button, 'mouseout', handler);

        // 如果要进行页面的卸载或者对button的父元素更改innerHTML操作
        // 最好为button移除事件
        // 但是要想正确运行上面的绑定事件，那么下面这个先注释
        // 否则会将刚绑定的事件又移除了
        // EventUtil.removeHandler(button, 'click', handler);
        // EventUtil.removeHandler(button, 'mouseover', handler);
        // EventUtil.removeHandler(button, 'mouseout', handler);
        
        function handleMouseWheel(event) {
            event = EventUtil.getEvent(event);
            var delta = EventUtil.getWheelDelta(event);
            if (delta < 0) {
                button.value = 'mouse scroll down';
            } else {
                button.value = 'mouse scroll dowm';
            }
        }

        EventUtil.addHandler(document, 'mousewheel', handleMouseWheel);
    </script>
</body>
</html>

其中，阻止默认事件以及停止事件冒泡函数没有测试。