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

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事件处理程序的元素。

你可能感兴趣的:(事件类型——鼠标点击事件)