浅谈Javascript鼠标和滚轮事件


Posted in Javascript onJune 27, 2012

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 相关文章推荐
jQuery 1.0.4 - New Wave Javascript(js源文件)
Jan 15 Javascript
javascript TextArea动态显示剩余字符
Oct 22 Javascript
扩展javascript的Date方法实现代码(prototype)
Nov 20 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
Nov 14 Javascript
javascript实现微信分享
Dec 23 Javascript
在JavaScript中正确引用bind方法的应用
May 11 Javascript
jQuery实现仿百度帖吧头部固定导航效果
Aug 07 Javascript
jQuery Ajax 全局调用封装实例代码详解
Jun 02 Javascript
Vue2递归组件实现树形菜单
Apr 10 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
浅析Node.js非对称加密方法
Jan 29 Javascript
vue2.0使用swiper组件实现轮播的示例代码
Mar 03 Javascript
浅谈Javascript事件模拟
Jun 27 #Javascript
JS时间选择器 兼容IE6,7,8,9
Jun 26 #Javascript
基于jquery & json的省市区联动代码
Jun 26 #Javascript
jquery命令汇总,方便使用jquery的朋友
Jun 26 #Javascript
Jvascript学习实践案例(开发常用)
Jun 25 #Javascript
来自国外的30个基于jquery的Web下拉菜单
Jun 22 #Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
Jun 22 #Javascript
You might like
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
php获取用户浏览器版本的方法
2015/01/03 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
各种页面定时跳转(倒计时跳转)代码总结
2013/10/24 Javascript
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
JavaScript中实现Map的示例代码
2015/09/09 Javascript
jquery判断密码强度的验证代码
2020/04/22 Javascript
jquery利用拖拽方式在图片上添加热链接
2015/11/24 Javascript
用js读写cookie的简单方法(推荐)
2016/08/08 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
2016/09/14 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
微信小程序实现手指触摸画板
2018/07/09 Javascript
详解Vue 项目中的几个实用组件(ts)
2019/10/29 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020/05/08 Javascript
[04:45]DOTA2上海特级锦标赛主赛事第四日RECAP
2016/03/06 DOTA
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
使用Python导出Excel图表以及导出为图片的方法
2015/11/07 Python
python3中set(集合)的语法总结分享
2017/03/24 Python
Python利用pandas计算多个CSV文件数据值的实例
2018/04/19 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
Pycharm配置远程调试的方法步骤
2018/12/17 Python
浅析python内置模块collections
2019/11/15 Python
Pytorch之Variable的用法
2019/12/31 Python
CSS3 linear-gradient线性渐变生成加号和减号的方法
2017/11/21 HTML / CSS
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
Carolina工作鞋官网:Carolina Footwear
2019/03/14 全球购物
项目经理岗位职责
2013/11/11 职场文书
群众路线专项整治方案
2014/10/27 职场文书
信贷客户经理岗位职责
2015/04/09 职场文书
2015年干部教育培训工作总结
2015/05/15 职场文书
2016年师德先进个人事迹材料
2016/02/29 职场文书
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
2021/03/31 Servers
Mysql 性能监控及调优
2021/04/06 MySQL