鼠标事件是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
滚轮事件:
IE 6.0 首先实现了mousewheel 事件。此后,Opera、Chrome 和Safari 也都实现了这个事件。当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时(无论向上还是向下),就会触发mousewheel事件。这个事件可以在任何元素上面触发,最终会冒泡到document(IE8)或window(IE9、Opera、Chrome 及Safari)对象。与mousewheel 事件对应的event 对象除包含鼠标事件的所有标准信息外,还包含一个特殊的wheelDelta 属性。当用户向前滚动鼠标滚轮时,wheelDelta 是120 的倍数;当用户向后滚动鼠标滚轮时,wheelDelta 是120 的倍数。
将mousewheel 事件处理程序指定给页面中的任何元素或document 对象,即可处理鼠标滚轮的交互操作。
EventUtil.addHandler(document, "mousewheel", function(event){ event = EventUtil.getEvent(event); alert(event.wheelDelta); });
这个例子会在发生mousewheel 事件时显示wheelDelta 的值。多数情况下,只要知道鼠标滚轮滚动的方向就够了,而这通过检测wheelDelta 的正负号就可以确定。
有一点要注意:在Opera 9.5 之前的版本中,wheelDelta 值的正负号是颠倒的。如果你打算支持早期的Opera 版本,就需要使用浏览器检测技术来确定实际的值,如下面的例子所示。
<!DOCTYPE html> <html> <head> <title>MouseWheel Event Example</title> <script type="text/javascript" src="/upload/files/201702/client.js"></script> <script type="text/javascript" src="/upload/files/201702/EventUtil.js"></script> </head> <body> <div id="myDiv">Try scrolling your mouse wheel (IE, Safari, and Opera).</div> <script type="text/javascript"> EventUtil.addHandler(document, "mousewheel", function(event){ event = EventUtil.getEvent(event); var delta = (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta); alert(delta); }); </script> </body> </html>
触摸设备:
iOS 和Android 设备的实现非常特别,因为这些设备没有鼠标。在面向iPhone 和iPod 中的Safari开发时,要记住以下几点。
不支持dblclick 事件。双击浏览器窗口会放大画面,而且没有办法改变该行为。
轻击可单击元素会触发mousemove 事件。如果此操作会导致内容变化,将不再有其他事件发生;
如果屏幕没有因此变化,那么会依次发生mousedown、mouseup 和click 事件。轻击不可单击的元素不会触发任何事件。可单击的元素是指那些单击可产生默认操作的元素(如链接),或者那些已经被指定了onclick 事件处理程序的元素。
mousemove 事件也会触发mouseover 和mouseout 事件。
两个手指放在屏幕上且页面随手指移动而滚动时会触发mousewheel 和scroll 事件。
相关推荐
文本框取鼠标事件文本框取鼠标事件文本框取鼠标事件文本框取鼠标事件文本框取鼠标事件
js鼠标事件大全js鼠标事件大全js鼠标事件大全js鼠标事件大全js鼠标事件大全
用matlab编程,对鼠标事件编程的小技巧,供大家相互交流学习总结。
代码介绍了鼠标事件包括鼠标的移动,按下、松开、单击、双击等获取事件。
鼠标事件特效鼠标事件特效鼠标事件特效鼠标事件特效鼠标事件特效鼠标事件特效鼠标事件特效
海思hi3536开发板QT鼠标事件捕获,鼠标移动 ,板子上的配置工作。成功显示鼠标和捕获事件, 可以用cat /dev/input/event0查看鼠标移动数据
js常用方法 欢迎大家下载!里面的内容很多,主要有js的常用鼠标事件的方法!喜欢js的朋友可以下载!很全面的!
里面提供了 所有的鼠标事件的汇总 对刚开始接触JS的很有用处 在实际的开发中 不能离开的一个文本
Flash鼠标事件,鼠标与实例挂接事件。将实例化对象的坐标与鼠标的坐标挂接,使得实例化对象随着鼠标移动进行移动。
vc++模拟鼠标事件 代码很简单 傻瓜式教程
Mottle是一个简单的事件管理器,负责处理在开发 jsPlumb 和 jsPlumb 工具包时经常遇到的一些事件。 简单来说,它的特点是: 在启用触摸的设备上将鼠标事件自动映射到其触摸等
简单的例子,qt中的鼠标事件例如点击事件、释放事件、双击事件、离开事件、按压事件等可以看看~比较适合啥也不会的人呢
c#鼠标事件的使用小实例,初学者要看哦,我那时也是不懂饿 自己找了好久
Delphi鼠标事件操作..........
java图形处理及鼠标事件处理, 资源描述 资源描述 资源描述
HTML 控件 鼠标事件,HTML 控件 鼠标事件,HTML 控件 鼠标事件
AS3 特效 demo 鼠标事件 鼠标顶球
鼠标事件 鼠标经过显示悬浮层
用flashCs4做的关于鼠标事件处理的内容,
图像用户界面程序设计;鼠标委托时间处理模型.