浅谈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 相关文章推荐
JavaScript使用prototype定义对象类型(转)[
Dec 22 Javascript
JavaScript 自动完成脚本整理(33个)
Oct 20 Javascript
JavaScript传递变量: 值传递?引用传递?
Feb 22 Javascript
JavaScript设计模式之单例模式实例
Sep 24 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
May 28 Javascript
详解React Native顶|底部导航使用小技巧
Sep 14 Javascript
浅谈mint-ui loadmore组件注意的问题
Nov 08 Javascript
Vue2 SSR渲染根据不同页面修改 meta
Nov 20 Javascript
JS基于封装函数实现的表格分页完整示例
Jun 26 Javascript
JavaScript中this的全面解析及常见实例
May 14 Javascript
基于Vue SEO的四种方案(小结)
Jul 01 Javascript
对layui中table组件工具栏的使用详解
Sep 19 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
人族 TERRAN 概述
2020/03/14 星际争霸
Php Cookie的一个使用注意点
2008/11/08 PHP
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
php过滤XSS攻击的函数
2013/11/12 PHP
Zend Framework教程之Zend_Config_Xml用法分析
2016/03/23 PHP
php图片合成方法(多张图片合成一张)
2017/11/25 PHP
Extjs ajax同步请求时post方式参数发送方式
2009/08/05 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
深入浅析同源策略和跨域访问
2015/11/26 Javascript
Bootstrap每天必学之js插件
2015/11/30 Javascript
非常棒的jQuery图片轮播效果
2016/04/17 Javascript
微信小程序开发之入门实例教程篇
2017/03/07 Javascript
详解nodejs操作mongodb数据库封装DB类
2017/04/10 NodeJs
nodejs 图片预览和上传的示例代码
2017/09/30 NodeJs
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
2019/06/27 Javascript
vue cli3适配所有端方案的实现
2020/04/13 Javascript
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
Node.js path模块,获取文件后缀名操作
2020/11/07 Javascript
Python基于递归算法求最小公倍数和最大公约数示例
2018/07/27 Python
Python3.7 基于 pycryptodome 的AES加密解密、RSA加密解密、加签验签
2019/12/04 Python
Python hmac模块使用实例解析
2019/12/24 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
如何导出python安装的所有模块名称和版本号到文件中
2020/06/05 Python
Python+PyQt5+MySQL实现天气管理系统
2020/06/16 Python
python实现最短路径的实例方法
2020/07/19 Python
详解如何在PyCharm控制台中输出彩色文字和背景
2020/08/17 Python
Python存储读取HDF5文件代码解析
2020/11/25 Python
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
台湾最大网路书店:博客来
2018/03/18 全球购物
澳大利亚和新西兰最大的在线旅行社之一:Aunt Betty
2019/08/07 全球购物
Java基础面试题
2014/07/19 面试题
考察现实表现材料
2014/05/19 职场文书
2019财务转正述职报告
2019/06/27 职场文书
sql server删除前1000行数据的方法实例
2021/08/30 SQL Server
virtualenv隔离Python环境的问题解析
2022/06/21 Python