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

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

赞 (0)

相关推荐

  • JavaScript 滚轮事件使用说明

    不过遗憾的是各浏览器都不尽相同. 一) 事件名称不相同 IE, KHTML(Safari, Chrome), Opera对应的事件名称是 "mousewheel".而 Gecko(Firefox, Netscape) 对应的事件名称是 "DOMMouseScroll". 二) 事件对象的属性不一样 有时我们需要知道用户是向上滚了还是向下滚了.例如我们有一个响应滚动事件的函数: 复制代码 代码如下: function wheelHandle(e) { if(e.whe

  • JavaScript事件类型中焦点、鼠标和滚轮事件详解

    本文针对JavaScript 事件中"事件类型"下"焦点.鼠标和滚轮事件"的注意要点进行整理,分享给大家供大家参考,具体内容如下 一.焦点事件 一般利用这些事件与document.hasFocus()方法和document.activeElement属性配合.主要有: blur:元素失去焦点,不会冒泡: DOMFocusIn:同HTML事件focus,于DOM3遭废弃,选用focusin: DOMFocusOut:同HTML事件blur,于DOM3遭废弃,选用foc

  • javascript 鼠标滚轮事件

    今天在网上找来了响应滚轮的函数并改写成下面的类 复制代码 代码如下: function wheelEvent(obj, handle) { this.handle = handle; // different events between Firefox and IE window.addEventListener ? obj.addEventListener("DOMMouseScroll", this.wheel, false) : (obj.onmousewheel = this

  • js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)

    js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)

    本文实例讲述了js实现的鼠标滚轮滚动切换页面效果的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>wheel</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <script type=

  • JavaScript焦点事件、鼠标事件和滚轮事件使用详解

    焦点事件 一般利用这些事件与document.hasFocus()方法和document.activeElement属性配合.主要有: blur:元素失去焦点,不会冒泡: DOMFocusIn:同HTML事件focus,于DOM3遭废弃,选用focusin: DOMFocusOut:同HTML事件blur,于DOM3遭废弃,选用focusout: focus:元素获得焦点,不回冒泡: focusin:获得焦点,与HTML事件focus等价,但会冒泡: focusout:失去焦点,与HTML事件b

  • javascript实现禁止鼠标滚轮事件

    平时我们兼容什么东西总是在调整低版本IE的兼容性,但是这回不是因为低版本浏览器不给力.而是因为火狐给力过头了,完全不顾其它浏览器的感受标新立异了.除了火狐之外,所有的浏览器都可以使用MouseWheel事件来处理鼠标滚轮的响应.但是火狐却偏偏不支持MouseWheel,而使用无厘头的DOMMouseScroll,这玩意儿除了火狐以外其它浏览器都不兼容.也就是说,对于鼠标滚轮事件的处理,火狐只能使用DOMMouseScroll.而非火狐则只能使用MouseWheel.这两种事件实现的原理不同,他们

  • javascript监听鼠标滚轮事件浅析

    我们都见到过这些效果,用鼠标滚轮实现某个表单内的数字增加减少操作,或者滚轮控制某个按钮的左右,上下滚动.这些都是通过js对鼠标滚轮的事件监听来实现的.今天这里介绍的是一点简单的js对于鼠标滚轮事件的监听. 不同浏览器不同的事件 首先,不同的浏览器有不同的滚轮事件.主要是有两种,onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持),关于这两个事件这里不做详述,想要了解的朋友请移步:鼠标滚轮(mousewheel)和DOMMouseScroll事件

  • js实现鼠标滚轮控制图片缩放效果的方法

    本文实例讲述了js实现鼠标滚轮控制图片缩放效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

  • JS滚轮事件onmousewheel使用介绍

    典型的应用时鼠标滚轮滚动控制图片或者文字的大小,例如此类的转动鼠标滚轮实现缩放等等交互效果中,会用到 Mousewheel 事件.在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+)中,都提供了 "mousewheel" 事件.滚轮事件的兼容性差异有些不拘一格,不是以往的IE8-派和其他派,而是FireFox派和其他派,杯具的是 Firefox 3.5+ 却不支持此事件,不过庆幸 Firefox 3.5+ 中提供了另外一个等同的事件:"DO

  • js捕获鼠标滚轮事件代码

    之前看到一个人人网高级前端面试的笔试题 要求手写代码,其中有个题是做一个图片展示 类似百度图片最下面小缩略图那个展示栏 然后要求有个鼠标滚轮滚动变大变小的要求 这个我还真不知道怎么做,在网上找了找资料 发现可以捕获onmousewheel的事件 然后根据event.wheelDelta值的正负来判断是前滚还是后滚 随便写了个小例子,顺便捕获下键盘的按键,不太美观没有换行 因为用textNode做的,加不进去html代码 说到这里是不是可以用这种方法来防止xss注入呢? 复制代码 代码如下: <b

  • 解析javascript中鼠标滚轮事件

    解析javascript中鼠标滚轮事件

    所有的现代浏览器都支持鼠标滚轮,并且在用户滚动滚轮时触发时间.浏览器通常使用鼠标滚轮滚动或缩放文档,但可以通过取消mousewheel事件来阻止这些默认操作.有一些互用性问题影响滚轮事件,但是编写跨平台的代码依旧可以行.除了Firefox之外的所有浏览器都支持"mousewheel"事件,但Firefox使用"DOMMouseScroll",而3级DOM事件规范草案建议使用事件名"wheel"替代"mousewheel". d

  • 两种js监听滚轮事件的实现方法

    前段时间在写前端的时候,需要监听浏览器的滚轮事件 网上查了一下,找到两种监听滚轮事件的方法: 一.原生js通过window.onscroll监听 //window.onscroll = function() {//为了保证兼容性,这里取两个值,哪个有值取哪一个 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //scrollTop就是触发滚轮事件时滚轮的高度 } 二.Jquery通过$(

  • js 事件对象 鼠标滚轮效果演示说明

    js 事件对象 鼠标滚轮效果演示说明

    Mouse Wheel Data .slider { width:50px; height:180px; background:#eee; padding:10px 0; cursor:n-resize; } .slider-slot { width:16px; margin:0 auto; height:180px; background:#eee; border:1px solid gray; border-color:#999 white white #999; position:rela

  • javascript 兼容鼠标滚轮事件

    这个事件在标准下和IE下是有区别的.firefox是按标准实现的,事件名为"DOMMouseScroll ",IE下采用的则是"mousewheel ".当然一行代码就解决了兼容问题 复制代码 代码如下: var mousewheel = document.all?"mousewheel":"DOMMouseScroll"; 事件属性,IE是event.wheelDelta,Firefox是event.detail 属性的方向

  • js中鼠标滚轮事件详解(firefox多浏览器)

    js中鼠标滚轮事件详解(firefox多浏览器)

    附加事件 其中经我测试,IE/Opera属于同一类型,使用attachEvent即可添加滚轮事件. 复制代码 代码如下: /*IE注册事件*/ if(document.attachEvent){ document.attachEvent('onmousewheel',scrollFunc); } Firefox使用addEventListener添加滚轮事件 复制代码 代码如下: /*Firefox注册事件*/ if(document.addEventListener){ document.ad

随机推荐