javaScript事件(六)事件类型之滚轮事件
2017-03-16 13:07
302 查看
滚轮事件其实就是一个mousewheel事件,这个事件跟踪鼠标滚轮,类似Mac的触屏版。
给document指定了onclick事件处理程序,单击页面时在title中可以看到客户端的坐标信息。
注意:这些值中不包括页面滚动的距离,因为这个位置并不表示鼠标在页面上的位置。
在页面没有滚动的情况下,pageX和pageY的值与clientX和clientY的值相等。
IE8及更早版本不支持事件对象上的页面坐标,不过使用客户区坐标和滚动信息可以计算出来。这时候需要用到document.body(混杂模式)或document.documentElement(标准模式)中的scrollLeft和scrollTop属性。如下:
DOM为此规定了4个属性,表示这些修改键的状态:shiftKey,ctrlKey,altKey和metaKey。这些属性中包含的都是布尔值,如果相应的键被按下了,则值为true,否则值为false。当某个鼠标事件发生时,通过检测这几个属性就可以确定用户是否同时按下了其中的键。如下:
通过一个onclick事件处理程序检测了不同修改键的状态。数组keys中包含着被按下的修改键的名称。也就是说,如果有属性值为true,就会将对应修改键的名称添加到keys数组中。在事件处理程序的最后,有一个警告框将检测到的键的信息显示给用户。
View Code
document.implementation.hasFeature("MouseEvents","2.0"))通过检测"MouseEvents"这个特性,就可以确定event对象中存在的button属性中是否包含正确的值。
Note:在onmouseup事件处理程序时,button值表示释放的是哪个按钮。此外,如果不是按下或释放了主鼠标按钮,Opera不会触发mouseup或mousedown事件。
在同一个像素上相继地发生一次mousedown和一次mouseup事件算作一次单击。detail属性从1开始计数,每次单击递增。如果鼠标在mousedown和mouseup之间移动了位置,则detail会被重置为0。
mousewheel事件可以在任何元素上面触发,最终会冒泡到document(IE8)或者window(IE9,Opera,Chrome及Safari)对象。
相关属性:除了鼠标事件的所有标准信息外,mousewheel事件对应的event对象还包含一特殊的wheelDelta属性。
当用户向前滚动鼠标滚轮时,wheelDelta是120的倍数;当用户向后滚动鼠标滚轮时,wheelDelta是-120的倍数。
多数情况,只需要知道鼠标滚轮滚动的方向即可,这通过wheelDelta的正负号实现。
兼容性:
Opera 9.5之前的版本,wheelDelta值的正负号是颠倒的。
Firefox支持一个DOMMouseScroll的类似事件,也是在鼠标滚轮轮滚动时触发。鼠标有关信息保存在detail属性中。当向前滚动鼠标滚轮时,这个属性的值是-3的倍数,向后滚动鼠标滚轮时,这个值是3的倍数。
以下为兼容性处理。
不支持dblclick事件。双击浏览器窗口会放大画面,而且没有办法改变该行为。
轻击可单击元素会触发mousemove事件。如果此操作会导致内容变化,将不再有其他事件发生;如果屏幕没有因此变化,那么会依次触发mousedown,mouseup和click事件。轻击不可单击元素不会触发任何事件。可单击的元素是指那些可以单击产生默认操作的元素(如链接),或者那些已经被指定了onclik事件处理程序的元素。
mousemove事件也会触发mouseover和mouseout事件。
两个手指放在屏幕上且页面随手指移动而滚动时会触发mousewheel和scroll事件。
扩展阅读:
javaScript事件(一)事件流
javaScript事件(二)事件处理程序
javaScript事件(三)事件对象
javaScript事件(四)event的公共成员(属性和方法)
javaScript事件(五)事件类型之鼠标事件
本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:http://www.cnblogs.com/starof/p/6552734.html有问题欢迎与我讨论,共同进步。
一、客户区坐标位置
鼠标事件都是在浏览器视口的特定位置上发生的。这个位置信息保存在事件对象的clientX和clientY属性中。所有浏览器都支持者两个属性。clientX和clientY表示事件发生时鼠标指针在视口中的水平和垂直坐标。document.addEventListener('click',function(event){ document.title=event.clientX+' , '+event.clientY; },false);
给document指定了onclick事件处理程序,单击页面时在title中可以看到客户端的坐标信息。
注意:这些值中不包括页面滚动的距离,因为这个位置并不表示鼠标在页面上的位置。
二、页面坐标位置
通过clientX和clientY能够指定鼠标是在视口中声明位置发生的,而页面坐标通过事件对象的pageX和pageY属性,能够得到事件是在页面中的什么位置发生的。即pageX和pageY表示鼠标光标在页面中的位置,因此坐标是从页面本身而非视口的左边和顶边计算的。document.addEventListener('click',function(event){ console.log(event.clientX+' , '+event.clientY); console.log(event.pageX+' , '+event.pageY); },false);
在页面没有滚动的情况下,pageX和pageY的值与clientX和clientY的值相等。
IE8及更早版本不支持事件对象上的页面坐标,不过使用客户区坐标和滚动信息可以计算出来。这时候需要用到document.body(混杂模式)或document.documentElement(标准模式)中的scrollLeft和scrollTop属性。如下:
<script type="text/javascript"> var div=document.getElementById("myDiv"); EventUtil.addHandler(div,"click",function(event){ event=EventUtil.getEvent(event); var pageX=event.pageX, pageY=event.pageY; if(pageX==undefined) { pageX=event.clientX+(document.body.scrollLeft || document.documentElement.scrollLeft); } if(pageY==undefined){ pageY=event.clientY+(document.body.scrollTop || document.documentElement.scrollTop); } alert("Page coordinates:" +pageX+" , "+pageY); }); </script>
三、屏幕坐标位置
鼠标事件发生时,不仅会有相对于浏览器窗口的位置,还有一个相对于整个电脑屏幕的位置。而通过screenX和screenY属性就可以确定鼠标事件发生时鼠标指针相对于整个屏幕的坐标信息。document.addEventListener('click',function(event){ console.log("Client coordinates"+event.clientX+' , '+event.clientY); console.log("Page coordinates "+event.pageX+' , '+event.pageY); console.log("Screen coordinates "+event.screenX+' , '+event.screenY); },false);
四、修改键
虽然鼠标事件主要是使用鼠标来触发的,但在按下鼠标时键盘上的某些键的状态也可以影响到所要采取的操作。这些修改键就是Shift、Ctrl、Alt和Meta(在Windows键盘中是Windows键,在苹果机中是Cmd键) ,它们通常被用来修改鼠标事件的行为。DOM为此规定了4个属性,表示这些修改键的状态:shiftKey,ctrlKey,altKey和metaKey。这些属性中包含的都是布尔值,如果相应的键被按下了,则值为true,否则值为false。当某个鼠标事件发生时,通过检测这几个属性就可以确定用户是否同时按下了其中的键。如下:
<script type="text/javascript"> var div=document.getElementById("myDiv"); EventUtil.addHandler(div,"click",function(event){ event=EventUtil.getEvent(event); var keys=new Array(); if(event.shiftKey){ keys.push("shift");; } if(event.ctrlKey){ keys.push("ctrl"); } if(event.altKey){ keys.push("alt"); } if(event.metaKey){ keys.push("meta"); } alert("Keys: "+keys.join(",")); }); </script>
通过一个onclick事件处理程序检测了不同修改键的状态。数组keys中包含着被按下的修改键的名称。也就是说,如果有属性值为true,就会将对应修改键的名称添加到keys数组中。在事件处理程序的最后,有一个警告框将检测到的键的信息显示给用户。
getButton:function(event){ if(document.implementation.hasFeature("MouseEvents","2.0")){ return event.button; }else{ switch(event.buton){ case 0: case 1: case 3: case 5: case 7: return 0; case 2: case 6: return 2; case 4: return 1; } } }
View Code
document.implementation.hasFeature("MouseEvents","2.0"))通过检测"MouseEvents"这个特性,就可以确定event对象中存在的button属性中是否包含正确的值。
Note:在onmouseup事件处理程序时,button值表示释放的是哪个按钮。此外,如果不是按下或释放了主鼠标按钮,Opera不会触发mouseup或mousedown事件。
七、更多的事件信息
“DOM2级事件”规范在event对象中还提供了detail属性,用于给出有关事件的更多信息。对于鼠标事件来说,detail中包含了一个数值,表示在给定位置上发生了多少次单击。在同一个像素上相继地发生一次mousedown和一次mouseup事件算作一次单击。detail属性从1开始计数,每次单击递增。如果鼠标在mousedown和mouseup之间移动了位置,则detail会被重置为0。
八、鼠标滚轮事件
当用户通过是不滚轮与页面交互,在垂直方向上滚动页面时(无论向上还是向下),就会触发mousewheel事件。由于mousewheel事件非常流行,而且所有浏览器都支持它,所以HTML5也加入了mousewheel事件。mousewheel事件可以在任何元素上面触发,最终会冒泡到document(IE8)或者window(IE9,Opera,Chrome及Safari)对象。
相关属性:除了鼠标事件的所有标准信息外,mousewheel事件对应的event对象还包含一特殊的wheelDelta属性。
当用户向前滚动鼠标滚轮时,wheelDelta是120的倍数;当用户向后滚动鼠标滚轮时,wheelDelta是-120的倍数。
多数情况,只需要知道鼠标滚轮滚动的方向即可,这通过wheelDelta的正负号实现。
兼容性:
Opera 9.5之前的版本,wheelDelta值的正负号是颠倒的。
Firefox支持一个DOMMouseScroll的类似事件,也是在鼠标滚轮轮滚动时触发。鼠标有关信息保存在detail属性中。当向前滚动鼠标滚轮时,这个属性的值是-3的倍数,向后滚动鼠标滚轮时,这个值是3的倍数。
以下为兼容性处理。
getWheelDelta:function(event){ if(event.wheelDelta){ return(client.engine.opera && client.engine.opera<9.5? -event.wheelDelta:event.wheelDelta); }else{ return -event.detail*40; } }
九、触摸设备
iPhone和iPad没有鼠标。不支持dblclick事件。双击浏览器窗口会放大画面,而且没有办法改变该行为。
轻击可单击元素会触发mousemove事件。如果此操作会导致内容变化,将不再有其他事件发生;如果屏幕没有因此变化,那么会依次触发mousedown,mouseup和click事件。轻击不可单击元素不会触发任何事件。可单击的元素是指那些可以单击产生默认操作的元素(如链接),或者那些已经被指定了onclik事件处理程序的元素。
mousemove事件也会触发mouseover和mouseout事件。
两个手指放在屏幕上且页面随手指移动而滚动时会触发mousewheel和scroll事件。
扩展阅读:
javaScript事件(一)事件流
javaScript事件(二)事件处理程序
javaScript事件(三)事件对象
javaScript事件(四)event的公共成员(属性和方法)
javaScript事件(五)事件类型之鼠标事件
本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:http://www.cnblogs.com/starof/p/6552734.html有问题欢迎与我讨论,共同进步。
相关文章推荐
- JavaScript事件类型中焦点、鼠标和滚轮事件详解
- JavaScript事件类型中焦点、鼠标和滚轮事件详解
- javascript 鼠标滚轮事件
- javascript 鼠标滚轮事件
- 好好学一遍JavaScript 笔记(十一)——事件的类型
- javascript监听鼠标滚轮事件浅析
- javascript 滚轮事件
- 支持IE和Firefox的鼠标滚轮事件JavaScript代码
- javascript 学习之自定义滚动条加滚轮事件
- javascript判断触发事件event的元素类型
- 浅谈Javascript鼠标和滚轮事件
- JavaScript中的鼠标滚轮事件详解
- javascript控制鼠标滚轮事件
- javascript滚轮事件
- javascript滚轮事件总结
- 好好学一遍JavaScript 笔记(十一)——事件的类型
- javascript: 鼠标滚轮事件
- JavaScript 滚轮事件使用说明
- 鼠标的滚轮javascript事件
- JavaScript中的鼠标滚轮事件详解