javascript基础从小白到高手系列一百五十：鼠标和滚轮事件

鼠标事件是Web 开发中最常用的一组事件，这是因为鼠标是用户的主要定位设备。DOM3 Events
定义了9 种鼠标事件。
 click：在用户单击鼠标主键（通常是左键）或按键盘回车键时触发。这主要是基于无障碍的考
虑，让键盘和鼠标都可以触发onclick 事件处理程序。
 dblclick：在用户双击鼠标主键（通常是左键）时触发。这个事件不是在DOM2 Events 中定义
的，但得到了很好的支持，DOM3 Events 将其进行了标准化。
 mousedown：在用户按下任意鼠标键时触发。这个事件不能通过键盘触发。
 mouseenter：在用户把鼠标光标从元素外部移到元素内部时触发。这个事件不冒泡，也不会在
光标经过后代元素时触发。mouseenter 事件不是在DOM2 Events 中定义的，而是DOM3 Events
中新增的事件。
 mouseleave：在用户把鼠标光标从元素内部移到元素外部时触发。这个事件不冒泡，也不会在
光标经过后代元素时触发。mouseleave 事件不是在DOM2 Events 中定义的，而是DOM3 Events
中新增的事件。
 mousemove：在鼠标光标在元素上移动时反复触发。这个事件不能通过键盘触发。
 mouseout：在用户把鼠标光标从一个元素移到另一个元素上时触发。移到的元素可以是原始元
素的外部元素，也可以是原始元素的子元素。这个事件不能通过键盘触发。
 mouseover：在用户把鼠标光标从元素外部移到元素内部时触发。这个事件不能通过键盘触发。
 mouseup：在用户释放鼠标键时触发。这个事件不能通过键盘触发。
页面中的所有元素都支持鼠标事件。除了mouseenter 和mouseleave，所有鼠标事件都会冒泡，
都可以被取消，而这会影响浏览器的默认行为。
由于事件之间存在关系，因此取消鼠标事件的默认行为也会影响其他事件。
比如，click 事件触发的前提是mousedown 事件触发后，紧接着又在同一个元素上触发了mouseup
事件。如果mousedown 和mouseup 中的任意一个事件被取消，那么click 事件就不会触发。类似地，
两次连续的click 事件会导致dblclick 事件触发。只要有任何逻辑阻止了这两个click 事件发生（比
如取消其中一个click 事件或者取消mousedown 或mouseup 事件中的任一个），dblclick 事件就不
会发生。这4 个事件永远会按照如下顺序触发：
(1) mousedown
(2) mouseup
(3) click
(4) mousedown
(5) mouseup
(6) click
(7) dblclick
click 和dblclick 在触发前都依赖其他事件触发，mousedown 和mouseup 则不会受其他事件影响。
IE8 及更早版本的实现中有个问题，这会导致双击事件跳过第二次mousedown 和click 事件。相
应的顺序变成了：
(1) mousedown
(2) mouseup
(3) click
(4) mouseup
(5) dblclick
鼠标事件在DOM3 Events 中对应的类型是"MouseEvent"，而不是"MouseEvents"。
鼠标事件还有一个名为滚轮事件的子类别。滚轮事件只有一个事件mousewheel，反映的是鼠标滚
轮或带滚轮的类似设备上滚轮的交互。

1. 客户端坐标
   鼠标事件都是在浏览器视口中的某个位置上发生的。这些信息被保存在event 对象的clientX 和clientY 属性中。这两个属性表示事件发生时鼠标光标在视口中的坐标，所有浏览器都支持。
   可以通过下面的方式获取鼠标事件的客户端坐标：
   let div = document.getElementById(“myDiv”);
   div.addEventListener(“click”, (event) => {
   console.log(Client coordinates: ${event.clientX}, ${event.clientY});
   });
   这个例子为
   元素指定了一个onclick 事件处理程序。当元素被点击时，会显示事件发生时
   鼠标光标在客户端视口中的坐标。注意客户端坐标不考虑页面滚动，因此这两个值并不代表鼠标在页面
   上的位置。