Javascript鼠标和滚轮事件

摘要:
鼠标:当用户释放鼠标按钮时触发,此事件无法通过键盘触发。click和dbclick事件都取决于其他事件的触发。IE9支持所有属性。跨浏览器getRelatedTarget方法可以如下编写:vareventUtil={getRelatedTarget:function{if{returnevent.relatedTarget;}elseif{retornevent.fromElement;}elseif{return event.toElement;}}elsief{return null;}};c) 只有当鼠标主按钮单击某个元素时,才会触发按钮单击事件。对于mousedown和mouseup,事件对象事件上有一个属性按钮,它可以确定按下或释放哪个键。

(转自:http://www.cnblogs.com/MrBackKom/archive/2012/06/25/2562920.html)

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

  click事件只有当鼠标主键点击了某一元素的时候才会触发(或者当某一元素获得焦点时按下回车键),对于mousedown和mouseup来说,在事件对象event上存在一个属性button,他可以确定是哪个键按下或者释放。在DOM实现的button属性值通常有三种可能:

  0:代表主键,

  1:代表滚轮,

  2:代表副键。

  在一般情况下主键指的是鼠标的左键,副键代表鼠标右键。

  从IE8开始也提供了button属性,但却有着完全不同的取值范围: 

  0 :没有按键按下,

  1 :主键已经被按下,

  2 :代表副键已经被按下,

  3 :主键副键都被按下,

  4 :代表中间键被按下,

  5 :代表主键和中间件被按下,

  6 :代表副键和中间键被按下,

  7 :代表三个键都被按下。

  可见DOM 模型下的button属性的取值范围比IE模型下的取值范围要简单的多,而且个人觉得ie下的操作情况略显变态。

d)其他事件信息

  在DOM2级事件上,为事件对象event还提供了detail属性来提供更多的事件信息,例如对于点击事件来说,detail可以记录同一像素位置的点击次数,detail的值是从1开始计数的,每次点击后加一,如果在mousedown和mouseup之间,鼠标发生移动,这个值将会被清零。

关于鼠标事件就先写这些,日后在慢慢补全。

免责声明:文章转载自《Javascript鼠标和滚轮事件》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇js 添加天数vc字符串转换处理:(绝对精华,收集所有的例子)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

NestJS WebSocket 开始使用

使用NestJs提供WebSocket服务。本文会在新建项目的基础上增加2个类 Gateway 实现业务逻辑的地方 WebSocketAdapter WebSocket适配器 新建项目 新建一个项目来演示,用npm来管理项目。 nest new websocket-start 得到一个有基础功能的工程。 进入项目目录,安装2个库 npm i --sa...

libevent编程疑难解答

http://blog.csdn.net/luotuo44/article/details/39547391 转载请注明出处:http://blog.csdn.net/luotuo44/article/details/39547391 正常情况下应该在libevent的回调中调用event_add函数, 如果想下其他的线程中调用event_add,是线程不...

鼠标滚轮事件

<script> var EventUtil = { addHandler: function(element,type,handler){//添加事件 if (element.addEventListener) {...

Node.js躬行记(4)——自建前端监控系统

这套前端监控系统用到的技术栈是:React+MongoDB+Node.js+Koa2。将性能和错误量化。因为自己平时喜欢吃菠萝,所以就取名叫菠萝系统。其实在很早以前就有这个想法,当时已经实现了前端的参数搜集,只是后台迟迟没有动手,也就拖着。 目前完成的还只是个雏形,仅仅是搜集了错误和相关的性能参数。 后台样式采用了封装过的matrix。 分析功能还很薄弱...

领域驱动设计概念(Domain-driven Design), Flower(响应式微服务框架)

DDD 领域驱动设计优势 领域专家和开发人员共同工作,这样软件可以准确表达业务规则,就像是领域专家开发出来的一样 帮助业务人员自我提高 知识集中,确保软件知识并不只是掌握在少数人手中 领域专家、开发者和软件间不需要“翻译”,彼此使用通用语言交流 设计就是代码,代码就是设计 DDD同时提供战略设计和战术设计。战略设计帮助理解必要的投入、团队人员构成;战术设...

vue指令(7)v-on

理论知识 双向数据绑定中,数据有多个来源,包括后台业务数据,用户网页操作数据等。对于用户网页操作,vue提供了事件机制,对用户操作做出反应。 使用方式 v-on:标准事件='事件处理逻辑'。 标准实践包括点击(click)、焦点(focus)等。在标签中使用时有四种方式,以点击事件为例 < button v-on:click='msg++'>...