Mouse鼠标事件详解

一、Mouse鼠标事件类型

事件类型	说明
click	点击鼠标左键或者按下回车键触发。onclick事件处理程序也同样可以通过这两个方式执行。
dblclick	DOM3级事件。双击鼠标左键。
mousedown	单击鼠标左键。
mouseup	松开单击着的鼠标左键。
mouseenter	鼠标光标从元素外部首次移动到元素范围之内时触发。该事件不冒泡，而且移动到后代元素上不触发。DOM3级事件。（IE、Firefox、Opera）
mouseleave	位于元素上方的鼠标光标移动到元素范围之外的时候触发。该事件不冒泡。光标移动到后代元素不触发。DOM3级事件。（IE、Firefox、Opera）
mousemove	鼠标在元素内部移动时重复地触发（大概可以做鼠标的炫彩效果）
mouseout	鼠标从一个元素移动到另一个元素时触发，该元素可以是原元素的外部元素或子元素。
mouseover	鼠标在元素外部，首次进入元素时，触碰到元素边界后触发。

注：

1.click包括按下与松开鼠标左键两个步骤，mousedown仅仅是按下鼠标左键操作，mouseup是松开鼠标左键操作。因此在鼠标操作上click=mousedown+mouseup;

2.除了mouseenter和mouseleave外，其它的鼠标事件都是冒泡的。

二、事件侦测

检测是否支持click、mousedown、mouseup、mousemove、mouseout、mouseover：

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

检测能否支持dblick、mouseenter、mouseleave：

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

三、事件属性

打印事件属性进行查看：

属性介绍：

1.客户区坐标位置

这个位置信息保存在事件对象的clientX，clientY属性中。所有浏览器均支持这两个属性。（event.clientX，event.clientY）

2.页面坐标位置

pageX，pageY属性。在页面没有滚动的情况下他们的值与clientX、clientY的值相等。

与客户区坐标位置的区别：

客户区坐标位置是相对于视口，即浏览器显示页面的窗口的顶部与最左边的距离。页面坐标位置相对于页面本身。页面滚动会造成它们俩的数值不一致。

3.屏幕坐标位置

screenX、screenY属性用于确定相对于整个电脑屏幕的距离。event.screenX，event.screenY。

4.相对事件源元素位置

offsetX、offsetY ：事件属性返回触发事件时 鼠标相对于事件源元素 的X,Y坐标，标准事件没有对应的属性。

5.修改键

修改键分别为：Shift、Ctrl、Alt、Meta（windows键盘中是windows键，MacOs中是Cmd键）。

分别对应：shiftKey、ctrlKey、altKey、metaKey四个属性。它们的值是布尔值，如果鼠标与这几个键的其中之一被一同按下，那么这些属性返回true值。

6.相关元素

mouseover事件发生时，事件的目标元素是获得光标的元素，但是有获得就有失去，此时的相关元素就是失去光标的元素。

mouseout事件发生时，事件的目标元素时失去光标的元素，此时的相关元素是获得光标的元素。

event.relatedTarget提供相关元素的信息。（有兼容性的问题，IE8及之前的版本不支持relatedTarget属性）

7.鼠标按钮

mousedown与mouseup事件中，其event事件存在一个button属性，其值有：“0”，“1”，“2”。0代表按下了主鼠标，1代表按下了中间鼠标，2代表按下了次级鼠标。默认情况下主鼠标是左鼠标，次级鼠标是右鼠标。

（IE8及其之前的版本也提供了button属性，但区别很大，使用时要特别注意兼容性）。

标准dom	IE8及更早
左键-0	左键-1
中键-1	中键-4
右键-2	右键-2

两者都有button属性，所以不能用能力检测(即判断是否有event.buttom属性)，得使用document.implementation.hasFeature(“MouseEvents”,“2.0”)判断，true表示是标准dom，否则为IE8-

8.更多的事件信息

event.detail

其中包含有一个数值，表示在给定位置上发生了多少次单击，从1开始计数。在此期间每触发一对mousedown与mouseup事件就加一，但是在mousedown与mouseup事件之间移动了鼠标位置的话，detail属性会被重置为0.

9.滚轮事件

mousewheel事件：event.wheelDelta

DOMMouseScroll事件：event.detail

①mousewheel事件

当鼠标滚轮滚动时在页面上触发mousewheel事件，该事件会一直冒泡到window对象上。当鼠标向前滚动时，event.wheelDelta的值为正数，向后滚动时为负数。（谷歌是正负150，Edge、opera是正负120）

②DOMMouseScroll事件

这是firefox独有的事件，当鼠标向前滚动时，event.detail的值为-3的倍数，否则为3的倍数。

DOMMouseScroll事件只能通过事件监听——addeventListener来进行绑定。

一般通过检测正负号来检测鼠标滚轮向前还是向后。

Warining：chrome、Edge、Opera浏览器的mousewheel事件的event.wheelDelta值是滚轮向前滚为正数，向后滚为负数。FireFox则不然，向前为负，向后为正。

10.触摸设备

ios与Android设备不支持鼠标。

不支持dblclick事件。双击浏览器会放大。

轻击可单击元素会触发mouseover事件。如果导致页面变化就不会有其他事件发生，但是如果没有导致页面变化，依次触发mousedown、mouseup、click事件。

轻击不可单击元素不会触发任何事件。可单击元素指的是可产生默认操作的元素，例如链接，或者那些已经被指定了onclick事件处理程序的元素。

四、事件兼容问题

1.event事件源的兼容问题

我们知道我们给哪个元素绑定了事件，那么这个事件就是事件源，那么，当我们用事件委托来实现一些功能的时候，我们必须要知道我们的事件源。

在标准浏览器下我们用event.target来指定。
在非标准浏览器下，我们用event.srcElement。

2.取消事件的默认行为与阻止事件的冒泡传递

取消事件的默认行为：
标准：preventDefault
非标准：returnValue = false

阻止事件的冒泡传递：
标准：stopPropagation
非标准：cancelBubble

还有一个e.stopImmediatePropagation，取消相同类型事件的所有监听函数的传播-意思就是我们用addEventListener给cilck事件绑定多个处理函数，当我们用了这个属性那么，所有的处理函数的冒泡传递被阻止。