浅谈Javascript鼠标和滚轮事件

时间: 作者:长般

  

[鼠标,滚轮]浅谈Javascript鼠标和滚轮事件

  a)鼠标事件  
  
  鼠标事件也许是web页面当中最常用到的事件,因为鼠标是最常用的导航设备,在DOM3级事件上定义了9个鼠标事件,分别为:  
  
  click:当用户点击鼠标主键通常是指鼠标左键或按回车键时触发。

  
  
  dbclick:当用户双击鼠标主键时发生触发,这个事件并没有在DOM2级事件中定义但是却被普遍支持了,后来在DOM3级中得到了标准化。

  
  
  mousedown:当用户按下鼠标任意一个键都会触发,这个事件是不能够通过键盘触发的。

  
  
  mouseenter:当鼠标图标从元素外移动至元素边界内时触发。该事件不支持冒泡,而且当鼠标在元素的上表面移动时负触发此事件。该事件不属于DOM2级事件,属于DOM3级后添加的事件,IE 、FF9+、以及opera支持此事件。

  
  
  mouseleave:当鼠标处于元素上方,之后移出元素边界是触发该事件,与mouseenter事件相同,不支持冒泡,在元素上方是不触发,该事件不属于DOM2级事件,属于DOM3级后添加的事件,IE 、FF9+、以及opera支持此事件。

  
  
  mousemove:当鼠标在某元素周围移动时重复触发,该事件不能通过键盘事件触发。

  
  
  mouseout:当鼠标处于某一元素上方,之后移动到其他元素上方时触发。元素移动到原始元素的边界外,或者原始元素的子元素上,这个事件不能通过键盘触发。

  
  
  mouseover:当用户将鼠标第一次从某元素边界外移动到该元素边界内时触发,这个事件不能够通过键盘触发。

  
  
  mouseup:当用户释放鼠标按键是触发,这个事件不能够通过键盘触发。

  
  
  页面上的所有元素都支持鼠标事件,除了mouseenter和mouseleave外,所有的事件都冒泡,并且他们的默认行为是可以被取消掉的。但取消鼠标事件的默认行为可能会影响到其他事件,因为有些鼠标事件是相互依赖的。

  
  
  只有当一个mousedown事件和一个mouseup事件在同一个元素上触发,才能触发鼠标的click事件;假设任何一个事件被取消,click事件将永远不会被触发。相似的原理dbclick事件依赖于click事件,如果连续两次click事件中任意一次被取消,dbclick都不会被触发。常用的鼠标事件如下:  
  
  1.mousedown、2.mouseup、3.click、4.mousedown、5.mouseup、6.click、7.dbclick。

  
  
  无论是click 还是 dbclick事件,都依赖于其他事件的触发。

  
  
  你可以通过下面的代码来确定浏览器是否在dom2事件上支持鼠标事件,  
  
  var isSupport = document.implementation.hasFeature('MouseEvents','2.0');  
  
  然而值得注意的是在dom3级事件上检测则有些不同:  
  
  var isSupport = document.implementation.hasFeature('MouseEvent','3.0');  
  
  在鼠标事件上还包含一个子类事件,即wheel事件(滚轮事件)。在wheel事件中只包含一个事件,mousewheel事件,他反应鼠标滚轮或其他装置,如mac的touchpad的交互情况。

  
  
b)关联元素  
  
  对于mouseover和mouseout事件来说,还存在着与事件相关的元素,这连个事件所执行的动作包括,移动鼠标从一个元素边界内部到另一个元素边界内部。以mouseover事件为例,他的主要目标元素是鼠标将要移至的元素,而那个关联元素就是失去鼠标的那个元素。同样对于mouseout事件,主要目标是那个鼠标移出的元素,而关联元素则是获得鼠标的元素,DOM通过event对象上的relatedTarget属性来提供关联元素的信息,IE8或更早版本的IE不支持relatedTarge属性,但却提供了与其功能相类似的fromElement属性和toElement属性。在IE下,当mousemove事件触发时,event对象的fromElement包含着关联元素,当mouseout事件触发时,event的toElement属性包含着关联元素。在IE9中支持所有的属性,一个跨浏览器的getRelatedTarget方法可以这样写:  
汇盛国际 代码如下:

  
var eventUtil = {  
getRelateTarget:function(event){  
if (event.relatedTarget) {  
return event.relatedTarget;  
}else if(event.fromElement){  
return event.fromElement;  
}else if(event.toElement){  
return event.toElement;  
}else {  
return null;  
}  
}  
};  
  
  
c)buttons (责任编辑:admin)

推荐图片Related

相关文章Related

查看更多热门新闻


首页 | 特效插件 | 常用代码 | 样式素材 | 脚本代码 | css特效

Copyright © 2017-2018 汇盛国际 版权所有

系统要求:本站自适应各终端浏览器分辨率

请使用Google、Firefox、IE9、百度浏览器登录网站

网站地图 | RSS订阅 | 汇盛国际平台