js_事件类型——鼠标点击事件

click：点击鼠标左键或者按下回车键触发。onclick事件处理程序也同样可以通过这两个方式执行。

dblclick：DOM3级事件。双击鼠标左键。

mousedown：单击鼠标左键。

mouseup：松开单击着的鼠标左键。

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

mouseenter：鼠标光标从元素外部首次移动到元素范围之内时触发。该事件不冒泡，而且移动到后代元素上不触发。DOM3级事件。（IE、Firefox、Opera）

mouseleave：位于元素上方的鼠标光标移动到元素范围之外的时候触发。该事件不冒泡。光标移动到后代元素不触发。DOM3级事件。（IE、Firefox、Opera）

mousemove：鼠标在元素内部移动时重复地触发（大概可以做鼠标的炫彩效果）

mouseout：鼠标从一个元素移动到另一个元素时触发，该元素可以是原元素的外部元素或子元素。

mouseover：鼠标在元素外部，首次进入元素时，触碰到元素边界后触发。（和mouseenter差不多应该）

 

检测是否支持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.修改键

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

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

5.相关元素

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

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

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

6.鼠标按钮

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

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

7.更多的事件信息

event.detail

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

8.滚轮事件

mousewheel事件：event.wheelDelta

DOMMouseScroll事件：event.detail

见事件——鼠标滚轮事件。

9.触摸设备

ios与Android设备不支持鼠标。

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

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

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