JS 事件(1)——事件类型——鼠标与滚轮事件 鼠标与滚轮事件

转载 (原文地址) sunny红 译文 JavaScript 339阅读 2017-05-16 12:14:52 举报

####鼠标事件

“DOM3级事件”中定义了9个鼠标事件。
click:在单击主鼠标按钮(一般是左键)或者按下回车时触发;这意味着onclick事件处理程序既可以通过鼠标也可以通过键盘执行。
dbclick:双击主鼠标按钮(一般是左键)或者按下回车键时触发。
mousedown:按下任意鼠标按钮时触发;不能通过键盘触发。
mouseup:释放鼠标按钮时触发;不能通过键盘触发。
mouseenter:在鼠标光标从元素外部首次移动到元素范围之内时触发;这个事件不冒泡,而且光标移动到元素的后代元素上不会触发;IE、Firefox9+和Opera支持这个事件。
mouseleave:在鼠标光标从元素上方移动到元素范围之外时触发;这个事件不冒泡,而且光标移动到元素的后代元素上不会触发;IE、Firefox9+和Opera支持这个事件。
mousemove:在鼠标光标在元素内部移动时重复地触发;不能通过键盘触发。
mouseout:在鼠标位于一个元素上方,然后移动到另一个元素时触发,另一个元素可以是这个元素的子元素;不能通过键盘触发。
mouseover:在鼠标位于一个元素外部,然后将其首次移动到另一个元素边界之内时触发;不能通过键盘触发。

只有在同一个元素上相继触发mousedown和mouseup,才会触发click事件;类似地,只有在同一个元素上触发两次click事件,才会触发一次dbclick事件。
这四个事件的触发顺序如下:
(1)mousedown
(2)mouseup
(3)click
(4)mousedown
(5)mouseup
(6)click
(7)dbclick

JS事件(1)——事件类型——鼠标与滚轮事件鼠标与滚轮事件

除了mouseenter、mouseleave、dbclick是“DOM3级事件”新增之外,其它事件都是“DOM2级事件”中定义的。
可以使用如下代码检测浏览器是否支持“DOM2级”鼠标事件:
html 代码

或者是否支持“DOM3级”鼠标事件:
html 代码

注意:“DOM3级”鼠标事件的feature名为MouseEvent;而“DOM2级”为MouseEvents。

####客户区坐标位置
通过事件对象event的clientX和clientY属性,可以访问事件发生时鼠标指针在视窗中的水平和垂直坐标。
html 代码

####页面坐标位置
通过事件对象event的pageX和pageY属性,可以访问事件发生时鼠标指针在页面中的水平和垂直坐标。
html 代码

在页面没有滚动的情况下,pageX和pageY的值与clientX和clientY的值相等。

####IE中的页面坐标位置
IE8及更早版本不支持事件对象上的页面坐标,不过可以使用客户区坐标和滚动信息计算出来。
需要用到document.body(混杂模式)或者document.documentElement(标准模式)中的scrollLeft和scrollTop属性。
计算过程如下:
html 代码

####屏幕坐标位置
通过事件对象event的screenX和screenY属性,可以访问事件发生时鼠标指针在屏幕中的水平和垂直坐标。
html 代码

####修改键
Shift、Ctrl、Alt、Meta(或Windows或Cmd),它们经常被用来修改鼠标事件的行为。
DOM为此规定了4个属性:shiftKey、ctrlKey、altKey、metaKey,表示这些修改键的状态。
这些属性中包含的都是布尔值,如果值为true,表示相应的键被按下。
当某个鼠标事件发生时,通过检测这4个属性,就能确定用户是否按下某个修改键。
html 代码

点击鼠标的同时按下Windows键,检测不出来,为何?
IE9、Firefox、Safari、Chrome和Opera都支持这4个属性;IE8及更早版本不支持metaKey属性。

相关元素
对mouseover事件而言,事件的主目标就是获得光标的元素,而相关元素就是失去光标的那个元素;
对mouseout事件而言,事件的主目标就是失去光标的元素,而相关元素就是获得光标的那个元素。
DOM通过event事件对象的relatedTarget属性提供了相关元素的信息。
这个属性只对mouseover和mouseout事件才包含值;对于其他事件,其值为null。
IE8及之前版本不支持relatedTarget属性,但提供相似的属性。
在mouseover事件触发时,IE的fromElement属性中保存着相关元素;在mouseout事件触发时,IE的toElement属性中保存了相关元素。
IE9支持所有的这些属性。
将getRelatedTarge()方法添加到event_util对象中。
html 代码

相关元素的示例:
html 代码

注意:Javascript中的tagName都是大写。

####鼠标按钮
对于mousedown和mouseup事件而言,在event事件对象中存在一个button属性,表示按下或释放的按钮。
DOM中的button属性可能有以下三个值:0,表示主鼠标按钮;1,表示中间按钮;2,表示次鼠标按钮。
IE8及之前版本中,也提供button属性,但其属性值与DOM的不太通属性值有很大差别。
再为event_util对象添加getButton()方法。
html 代码

通过检测“MouseEvents”这个特性,就可以确定event对象中存在的button属性中是否包含正确的值;如果测试失败,说明是IE,就必须对相应的值进行规范化。

鼠标按钮示例:

html 代码

更多的事件信息

对于鼠标事件来说,detail属性中包含一个数值,表示在给定位置上发生多少次单击;在同一个位置上相继发生mousedown和mouseup事件算作一次单击。

detail从1开始计数。

如果鼠标在mousedown和mouseup事件之间移动了位置,则detail的值会被重置为0。

鼠标滚轮事件

mousewheel事件,可以在任何元素上触发,最终会冒泡到document(IE8)或window(IE9、Opera、Chrome和Safari)对象。

与mousewheel事件对应的event对象除了包含鼠标事件的所有标准信息之外,还包含一个特殊的wheelDelta属性;当用户向前滚动鼠标滚轮时,wheelDelta是120的倍数,当用户向后滚动鼠标滚轮时,wheelDelta是-120的倍数。

1 event_util.addHandler(document, "mousewheel", function(event) {
2 event = event_util.getEvent(event);
3 alert(event.wheelDelta);
4 });
多数情况下,只需要知道滚动鼠标滚轮的方向,而这通过检测wheelDelta的正负号就可以确定。

在Opera9.5及之前版本中,wheelDelta的正负号是颠倒的;可以使用浏览器检测技术来确定实际的值,如下:
html 代码

在Firefox浏览器中,支持一个名为DOMMouseScroll的事件,也是在鼠标滚轮滚动时触发,其被视为鼠标事件,包含与鼠标事件有关的所有信息;而有关鼠标滚轮的信息则保存在detail属性中,当向前滚动滚轮时,其值为-3的倍数,当向后滚动滚轮时,其值为3的倍数。

可以将DOMMouseScroll事件添加到页面中的任何元素,而且该事件会冒泡到window对象。
html 代码

跨浏览器的解决方案

首先,创建一个能够取得鼠标滚轮增量值(delta)的方法getWheelDelta()。
html 代码

首先检测事件中是否包含wheelDelta属性,如果是,则通过wheelDelta属性返回值;如果不存在wheelDelta属性,则假设相应的值保存在detail属性中,将这个值取反然后乘以40,就可以得到与其它浏览器相同的值。

上述代码暂不考虑Opera9.5及之前的情况。

将这个方法添加到event_util对象中;附上event_util对象完整代码:
html 代码

定义一个handleWheelDelta函数,作为一个事件处理程序,可以同时应对FIrefox中的“DOMMouseScroll”事件和非Firefox中的“mousewheel”事件。
html 代码

可以使用以下代码来添加事件:
html 代码

可以进一步将这些代码放在一个私有作用域中,从而不会让新定义的函数干扰全局作用域。
html 代码

####按键事件keydown,keyup
html 代码

触摸设备

(1)不支持dbclick事件。双击浏览器窗口会放大画面,而且没有办法改变该行为。
(2)轻击可单击元素会触发mouseover事件。如果此操作导致内容变化,则不会再有其它事件发生;如果屏幕没有发生变化,则依次发生mousedown、mouseup、click事件。
(3)mousemove事件也会触发mouseover和mouseout事件。
(4)两个手指放在屏幕上且页面随手指移动而滚动时会触发mousewheel和scroll事件。

无障碍性问题

可以通过键盘上的回车键来触发click事件,而其它鼠标事件都不能通过键盘触发;因此,不建议使用其它鼠标事件来展示功能或引发代码执行,因为这样会给屏幕阅读器用户造成极大不便。
使用鼠标事件时应注意的几个易访问性问题:
(1)使用click事件执行代码。
(2)不要使用mouseover向用户显示新的选项;如果确实需要通过这种方式来显示,可以考虑添加显示相同信息的键盘快捷方式。
(3)不要使用dbclick执行重要的操作;键盘无法触发这个事件。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复