浅谈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 判断页面元素是否存在的代码
Aug 14 Javascript
浏览器常用高宽的jquery插件
Feb 24 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
Sep 22 Javascript
jQuery源码解读之removeAttr()方法分析
Feb 20 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
Sep 26 Javascript
AngularJS  双向数据绑定详解简单实例
Oct 20 Javascript
Bootstrap导航条的使用和理解3
Dec 14 Javascript
jQuery拖拽通过八个点改变div大小
Nov 29 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
Jul 10 Javascript
JS中数据结构之栈
Jan 01 Javascript
vue组件开发之tab切换组件使用详解
Aug 21 Javascript
TypeScript 使用 Tuple Union 声明函数重载
Apr 07 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
分页显示Oracle数据库记录的类之二
2006/10/09 PHP
深入php socket的讲解与实例分析
2013/06/13 PHP
php中使用getimagesize获取图片、flash等文件的尺寸信息实例
2014/04/29 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
jQuery插件原来如此简单 jQuery插件的机制及实战
2012/02/07 Javascript
iframe子父页面调用js函数示例
2013/11/07 Javascript
jQuery中appendTo()方法用法实例
2015/01/08 Javascript
很棒的js Tab选项卡切换效果
2016/08/30 Javascript
JS小数转换为整数的方法分析
2017/01/07 Javascript
JS+DIV实现的卷帘效果示例
2017/03/22 Javascript
jQuery自定义图片上传插件实例代码
2017/04/04 jQuery
浅谈react+es6+webpack的基础配置
2017/08/09 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
2018/08/20 Javascript
vue cli安装使用less的教程详解
2019/07/12 Javascript
node.js使用fs读取文件出错的解决方案
2019/10/23 Javascript
JavaScript前端实现压缩图片功能
2020/03/06 Javascript
微信小程序自定义底部弹出框功能
2020/11/18 Javascript
Python实现的堆排序算法原理与用法实例分析
2017/11/22 Python
Django实现登录随机验证码的示例代码
2018/06/20 Python
对python opencv 添加文字 cv2.putText 的各参数介绍
2018/12/05 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
python 发送和接收ActiveMQ消息的实例
2019/01/30 Python
Python docx库用法示例分析
2019/02/16 Python
python 并发编程 多路复用IO模型详解
2019/08/20 Python
python爬虫豆瓣网的模拟登录实现
2019/08/21 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
HTML5 语义化结构化规范化
2008/10/17 HTML / CSS
市三好学生主要事迹
2014/01/28 职场文书
诚信考试承诺书
2014/03/27 职场文书
银行内勤岗位职责
2014/04/09 职场文书
市场拓展计划书
2014/05/03 职场文书
田径运动会通讯稿
2014/09/13 职场文书
感恩教育观后感
2015/06/17 职场文书
诚实守信主题班会
2015/08/13 职场文书
2016大学军训通讯稿
2015/11/25 职场文书