JavaScript 笔记 —— 鼠标事宜的浏览器差别

2019年8月26日 210次阅读 来源: ac黄

鼠标是我们在 PC 端浏览网页时刻最主要的交互东西，因而鼠标事宜也是 Web 开辟当中最经常运用的一类事宜。然则，因为种种缘由，差别厂商或许差别版本的浏览器之间关于鼠标事宜的完成也有所差别。本文总结一下，鼠标事宜在差别浏览器完成的差别。

mouseover 和 mouseout 相干元素差别

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

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

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

能够看出上述两个事宜都是在形貌从一个元素移动到另一个元素的状况，因而介入事宜有两个元素，这个时刻我们就须要相识除了目的元素之外另有哪个元素列入了事宜。

规范事宜对象 event 包括了名为 relatedTarget 的属性，供应相干元素的信息，只要在 mouseover 和 mouseout 当中该属性才包括元素的信息，在其他事宜当中它的值为 null。

有以下 HTMl：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        #myDiv {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="myDiv">
    </div>
    <script src="demo.js"></script>
</body>
</html>

为 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/

    原文作者：ac黄
    原文地址: https://segmentfault.com/a/1190000002499967
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞