JavaScript 笔记 —— 鼠标事件的浏览器差异

haoguo 发布于2019-08-21 10:25 / 294人阅读

摘要：本文总结一下，鼠标事件在不同浏览器实现的差异。和相关元素差异和是级事件当中的其中两个事件。标准事件对象使用属性来识别鼠标按键。该事件当中的值与事件对象当中的作用相同。

鼠标是我们在 PC 端浏览网页时候最重要的交互工具，因此鼠标事件也是 Web 开发当中最常用的一类事件。然而，由于各种原因，不同厂商或者不同版本的浏览器之间对于鼠标事件的实现也有所不同。本文总结一下，鼠标事件在不同浏览器实现的差异。

mouseover 和 mouseout 相关元素差异

mouseover 和 mouseout 是 DOM3 级事件当中的其中两个事件。

mouseover 是当鼠标指针在该目标元素外部，然后用户将鼠标首次移入目标元素的边界时触发的事件。

mouseout 是当鼠标指针在当前元素上方，然后用户将鼠标移入另一个元素时触发的事件。另一个元素可以位于当前元素的外部，也可以是当前元素的子元素。

可以看出上述两个事件都是在描述从一个元素移动到另一个元素的情况，因此参与事件有两个元素，这个时候我们就需要了解除了目标元素之外还有哪一个元素参加了事件。

标准事件对象 event 包含了名为 relatedTarget 的属性，提供相关元素的信息，只有在 mouseover 和 mouseout 当中该属性才包含元素的信息，在其他事件当中它的值为 null。

有如下 HTMl：




    
    demo

为 myDiv 分别绑定 mouseover 和 mouseout 事件。

var div = document.getElmentById("myDiv");
div.addEventListener("mouseover", function(event) {
    alert("Mouse comes from " + event.relatedTarget.tagName);
    // 触发事件，弹出 "Mouse comes from BODY"
}, false);

var div = document.getElementById("myDiv");
div.addEventListener("mouseout", function(event) {
    alert("Mouse moves to " + event.relatedTarget.tagName);
    // 触发事件，弹出 "Mouse moves to BODY"
}, false);

IE8 或之前的版本不支持 relatedTarget 属性，我们需要使用另一个属性访问相关元素。当 mouseover 事件触发时，IE 事件对象当中 fromElement 保存相关元素；当 mouseout 事件触发时，IE 事件对象当中 toElement 保存相关元素。

延续上面的例子，为 myDiv 分别绑定 mouseover 和 mouseout 事件。

var div = document.getElementById("myDiv");
div.attachEvent("onmouseover", function(event) {
    alert("Mouse comes from " + event.fromElement.tagName);
    // IE 浏览器中触发事件，弹出 "Mouse comes from BODY"
});

var div = document.getElementById("myDiv");
div.attachEvent("onmouseout", function(event) {
    alert("Mouse moves to " + event.toElement.tagName);
    // IE 浏览器中触发事件，弹出 "Mouse moves to BODY"
});

鼠标按键信息差异

现在的鼠标通常包含3个按键，左键、右键和中间的键，在开发过程当中我们可能会需要知道用户按下的是鼠标的哪一个键。

标准事件对象使用 button 属性来识别鼠标按键。0 表示主鼠标按钮（一般为左键），1 表示中间的按钮，2 表示次鼠标按钮（一般为右键）。

延续上面的例子，为 myDiv 绑定 mousedown 事件。

var div = document.getElementById("myDiv");
div.addEventListener("mousedown", function (event) {
    alert(event.button);    // 根据按键不同分别出现值 0，1，2
}, false);

IE8 或之前的版本中的事件对象同样提供了 button 属性，但是该属性的值与标准事件对象有所不同。

0 表示没有按下按钮。

1 表示按下主鼠标按钮（一般为左键）。

2 表示按下次鼠标按钮（一般为右键）。

3 表示同时按下主、次鼠标按钮。

4 表示按下中间按钮。

5 表示同时按下主鼠标按钮和中间按钮。

6 表示同时按下次鼠标按钮和中间按钮。

7 表示同时按下了三个按钮

IE事件对象中 button 同时考虑到了两个或多个按钮同时按下的情形，虽然这样的操作并不常见。

鼠标滚轮事件差异

mousewheel 事件是用户使用鼠标滚轮滚动的时候触发的事件，该事件的兼容性比较好，IE6.0 就已经实现。

在鼠标滚轮的事件当中，我们通常会希望知道用户是向前还是向后滚动滚轮，mousewheel 事件对象当中包含一个 wheelDelta 属性，当用户向前滚动滚轮时，wheelDelta 的值为 120 的倍数；当用户向后滚动滚轮时，wheelDelta 的值为 -120 的倍数。

var div = document.getElementById("myDiv");
div.addEventListener("mousewheel", function (event) {
    alert(event.wheelDelta);   // 120 或 -120
}, false);

有一个需要注意的点，在 Opera 9.5 之前的版本，wheelDelta 的值与标准的值符号相反。

在 FireFox 浏览器当中，除了 mousewheel 事件以外还有一个表示鼠标滚动的事件 DOMMouseScroll。该事件当中 detail 的值与 mousewheel 事件对象当中的 wheelDelta 作用相同。

不同的是鼠标向前滚动时 detail 值为 -3，向后滚动时 detail 值为 3。

// FireFox 浏览器当中
var div = document.getElementById("myDiv");
div.addEventListener("DOMMouseScroll", function (event) {
    alert(event.detail); // -3 或 3
}, false);

感谢您的阅读，有不足之处请为我指出。

参考

JavaScript高级程序设计(第3版)

本文同步于我的个人博客 http://blog.acwong.org/2015/01/19/different-of-mouse-event/

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85495.html

JavaScript MVC 学习笔记（五）事件操作的拓展

摘要：事件类型布尔值，表示事件是否通过以冒泡形式触发。表示键盘事件的属性布尔值，表示当前按下的键是否表示一个字符。表示当前按键的值仅对事件有效。，事件发生时相对于屏幕的坐标。事件对象 event 对象还包含很多有用的属性。W3C 范中包含的大部分属性都列在下面，更多信息参照完整的标准规范。事件类型： bubbles ：布尔值，表示事件是否通过DOM 以冒泡形式触发。事件发生时...

Anshiii 2019-08-22 10:56 评论0 收藏0
js基础知识笔记

摘要：常见内存泄漏情形全局变量被忘记的或者闭包引用闭包概念有权访问另一个函数作用域的变量的函数。会话存储刷新页面依旧存在，与在持久上不同外，其余一致。请求向指定的资源提交被处理的数据，数据量和类型没限制，不主动缓存，页面刷新数据会被重新提交。 defer 脚本延迟执行，适用于外部脚本文件async 立即下载，不保证顺序（建议不修改DOM，避免重绘） CDN加速 (Content De...

李文鹏 2019-08-23 12:13 评论0 收藏0
vue2.0学习笔记（事件处理）

摘要：请记住，会告诉浏览器你不想阻止事件的默认行为。而单单释放也不会触发事件。修饰符修饰符允许你控制由精确的系统修饰符组合触发的事件。当一个被销毁时，所有的事件处理器都会自动被删除。 1、监听事件用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 Add 1 The button above has been clicked {{ counte...

bovenson 2019-08-23 18:35 评论0 收藏0
【30分钟学完】canvas动画|游戏基础(1)：理论先行

摘要：所建议的刷新率是秒帧，大部分浏览器是遵循这一标准的。基于时间的动画其实无论是还是定时器，都不能保证以特定速率播放。将物体每帧移动距离，转变为物体每秒移动距离。前言本文虽说是基础教程，但这是相对动画/游戏领域来说，在前端领域算是中级教程了，不适合前端小白或萌新。阅读前请确保自己对前端三大件（JavaScript+CSS+HTML）的基础已经十分熟悉，而且有高中水平的数学和物理知识。d...

wind5o 2019-08-02 16:28 评论0 收藏0
【30分钟学完】canvas动画|游戏基础(1)：理论先行

摘要：所建议的刷新率是秒帧，大部分浏览器是遵循这一标准的。基于时间的动画其实无论是还是定时器，都不能保证以特定速率播放。将物体每帧移动距离，转变为物体每秒移动距离。前言本文虽说是基础教程，但这是相对动画/游戏领域来说，在前端领域算是中级教程了，不适合前端小白或萌新。阅读前请确保自己对前端三大件（JavaScript+CSS+HTML）的基础已经十分熟悉，而且有高中水平的数学和物理知识。d...

wemall 2019-08-22 15:41 评论0 收藏0