鼠标与滚轮事件click、dblclick、 mousedown、mouseove

发布时间：2022/01/11 丨 文章来源：未知 丨 浏览次数：

鼠标事件也是开发过程中经常遇到需要判断的事件，例如，单击click，双击dblclick等常用操作。接下来由南昌网站建设公司网络开发人员向大家初步介绍鼠标与滚轮事件。

鼠标事件是 Web 开发中常用的一类事件，毕竟鼠标还是主要的定位设备。DOM3 级事件中定 义了 9个鼠标事件，简介如下。

click：在用户单击主鼠标按钮(一般是左边的按钮)或者按下回车键时触发。这一点对确保 易访问性很重要，意味着 onclick 事件处理程序既可以通过键盘也可以通过鼠标执行。

dblclick：在用户双击主鼠标按钮(一般是左边的按钮)时触发。从技术上说，这个事件并不 是 DOM2级事件规范中规定的，但鉴于它得到了广泛支持，所以 DOM3级事件将其纳入了标准。

mousedown：在用户按下了任意鼠标按钮时触发。不能通过键盘触发这个事件。

mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡，而且 在光标移动到后代元素上不会触发。DOM2级事件并没有定义这个事件，但 DOM3级事件将它 纳入了规范。IE、Firefox 9+和 Opera支持这个事件。

mouseleave：在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡，而且 在光标移动到后代元素上不会触发。DOM2级事件并没有定义这个事件，但 DOM3级事件将它 纳入了规范。IE、Firefox 9+和 Opera支持这个事件。

mousemove：当鼠标指针在元素内部移动时重复地触发。不能通过键盘触发这个事件。

mouseout：在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。又移入的另 一个元素可能位于前一个元素的外部，也可能是这个元素的子元素。不能通过键盘触发这个事件。

mouseover：在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触 发。不能通过键盘触发这个事件。

mouseup：在用户释放鼠标按钮时触发。不能通过键盘触发这个事件。

页面上的所有元素都支持鼠标事件。除了 mouseenter 和 mouseleave，所有鼠标事件都会冒泡， 也可以被取消，而取消鼠标事件将会影响浏览器的默认行为。取消鼠标事件的默认行为还会影响其他事 件，因为鼠标事件与其他事件是密不可分的关系。

只有在同一个元素上相继触发 mousedown 和 mouseup 事件，才会触发 click 事件;如果 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 及之前版本中的实现有一个小 bug，因此在双击事件中，会跳过第二个 mousedown 和 click 事件，其顺序如下：

(1) mousedown

(2) mouseup

(3) click

(4) mouseup

(5) dblclick IE9修复了这个 bug，之后顺序就正确了。

使用以下代码可以检测浏览器是否支持以上 DOM2 级事件(除 dbclick、mouseenter 和 mouseleave 之外)：

var isSupported = document.implementation.hasFeature("MouseEvents", "2.0");

要检测浏览器是否支持上面的所有事件，可以使用以下代码：

var isSupported = document.implementation.hasFeature("MouseEvent", "3.0")

南昌网站制作公司网络前端开发工程师提醒大家注意，DOM3级事件的 feature 名是"MouseEvent"，而非"MouseEvents"。 鼠标事件中还有一类滚轮事件。而说是一类事件，其实就是一个 mousewheel 事件。这个事件跟踪 鼠标滚轮，类似于 Mac的触控板。

本文仅限内部技术人员学习交流,不得作于其他商业用途.希望此文对广技人员有所帮助。原创文章出自:南昌网站建设公司-网络http://www.huicuiwang.cn/如转载请注明出处!