跨浏览器鼠标事件写法

来源：互联网发布：美国创价大学知乎编辑：程序博客网时间：2024/06/14 18:05

以下兼容性代码实例来自《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>

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

0 0