浅谈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

  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之间,鼠标发生移动,这个值将会被清零。

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

时间: 2016-06-27
Tags: 鼠标, 滚轮

浅谈Javascript鼠标和滚轮事件_javascript技巧的相关文章

浅谈javascript中this在事件中的应用

 这篇文章主要介绍了浅谈javascript中this在事件中的应用实例,非常有助于我们对this关键字的理解,这里推荐给大家.     this关键字在javascript中是非常强大的,但是如果你不清楚它是怎么工作的就很难使用它.   代码如下: function dosomething(){ this.style.color="#fff"; }   上面这段代码中的this指向什么呢,运行dosomething()会输出什么呢? 在javascript中,this总是指向当前执行

浅谈addEventListener和attachEvent的区别_javascript技巧

• addEventListener共有3个参数,如下所示: element.addEventListener(type,listener,useCapture); 参数 参数说明 element 要绑定事件的对象,及HTML节点. type 事件名称,注意去掉事件前边的"on",比如"onclick"要写成"click","onmouseover"要写成"mouseover". listener 要绑定的

PPK 谈 JavaScript 的 this 关键字 [翻译]_javascript技巧

下面先讲如何在event handling(事件处理)中用它,再接着是讲 this 的其他用法. 自己本身 先来看看函数 doSomething() 里的 this 到底是指向(refer to)了什么? function doSomething() { this.style.color = '#cc0000'; } JavaScript的 this 总指向所运行的函数"自己本身".也就是说,它是一种指向函数对象的方法.在页面中定义 doSomething() 函数,自己本身是指页面.

浅谈javascript事件取消和阻止冒泡

这篇文章主要介绍了浅谈javascript事件取消和阻止冒泡的方法和示例,有需要的小伙伴可以参考下.     取消默认操作 w3c的方法是e.preventDefault(),IE则是使用e.returnValue = false; 在支持addEventListener()的浏览器中,也能通过调用时间对象的preventDefault()方法取消时间的默认操作.不过,在IE9之前的IE中,可以通过设置事件对象的returnValue属性为false来达到同样的效果.下面的代码假设一个事件处理程

浅谈Javascript线程及定时机制

  这篇文章主要介绍了浅谈Javascript线程及定时机制的相关资料,需要的朋友可以参考下 setTimeout.setInterval的使用 Javascript api文档中定义setTimeout和setInterval第二个参数意义分别为间隔多少毫秒后回调函数被执行和每隔多少毫秒回调函数被执行.但随着工作经验的积累,我们发现事实并非如此. 比如 ? 1 2 3 4 5 div.onclick=function(){ setTimeout(function(){ document.get

浅谈javascript属性onresize

  这篇文章主要介绍了浅谈javascript属性onresize的详细使用方法,十分的实用,这里推荐给大家,有需要的小伙伴可以参考下. 浅谈javascript属性onresize ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 //获取屏幕宽度并动态赋值 var winWidth = 0; var winHeight = 0; function findDimensio

浅谈javascript中call()、apply()、bind()的用法

  浅谈javascript中call().apply().bind()的用法         一直对Javascript中的apply/call/bind的用法很模糊,恰好看到了这篇文章.对三者之间的区别与联系算是有了比较清晰的认识.这里记录下来,分享给大家. call(thisObj,arg1,arg2...).apply(thisObj,[obj1,obj2...])这二个方法是每个函数都包含的非继承的方法 call(thisobj[, args])和apply(thisobj[, arg

浅谈JavaScript编程语言的编码规范_基础知识

JavaScript 编程语言作为最流行的客户端脚本语言,早已被众多 Web 开发人员所熟悉.随着 Web2.0 时代的到来和 Ajax 技术的广泛应用,JavaScript 也逐渐吸引着更多的视线.工作中要求越多的是对 JavaScript 语言的深入学习,灵活运用,和对编码质量的保证. 对于熟悉 C/C++ 或 Java 语言的工程师来说,JavaScript 显得灵活,简单易懂,对代码的格式的要求也相对松散.很容易学习,并运用到自己的代码中.也正因为这样,JavaScript 的编码规范也

Javascript 鼠标监听事件

问题描述 Javascript 鼠标监听事件 纯原生,不使用jQuery 鼠标移入元素后出发 onmouseover 当动画执行完毕之后再判断当前鼠标位置是 否在元素内或外,若在外则执行 onmouseout 若在元素内则不做任何处理. <div id= "itemTitle" class="itemTitle"> <span class="topline"></span> <p></p>

浅谈JavaScript中setInterval和setTimeout的使用问题_基础知识

说到setInterval,就不得不提到setTimeout,二者都是用于定时执行某函数,区别在于setTimeout 只执行一次,而setInterval可以一直连续不断执行下去,典型用法如下: function do_sth() { console.log('Hello...'); } setTimeout(do_sth, 2500); // 2.5 秒后,执行 do_sth 函数(只执行一次) setInterval(do_sth, 3500); // 3.5 秒后,执行 do_sth 函