JavaScript Event学习第九章 鼠标事件_javascript技巧

先看看都有哪些鼠标事件:mousedown,mouseup_and_click,dblclick,mousemove和mouseover mouseout。然后还会解释一下relatedTarget,fromElement和toElement这些事件属性。最后是微软的mouseenter和mouseleave事件。

浏览器的兼容性问题,可以在浏览器兼容性列表查看。

例子
这里有一个例子。可以帮助理解下面的内容。
mousedown,mouseup,click和dblclick在这个链接上注册。可以再下面的文本框里面查看。或者在对话框里面。(请在原文里尝试:http://www.quirksmode.org/js/events_mouse.htm)
Mousedown,mouseup,click
如果用户在一个元素上点击,那么最少三个事件会被触发,顺序是这样的:
1、mousedown,当用户在这个元素上按下鼠标键的时候
2、mouseup,当用户在这个元素上松开鼠标键的时候
3、click,当一个mousedown和一个mouseup都在这个元素上被检测到的时候发生
通常mousedown和mouseup比click有用。有些浏览器不允许你读取onclick的事件信息。而且有时候用户用鼠标做出某些动作click事件没有跟上。
假设用户在一个链接上按下了鼠标键,然后把鼠标挪开了并且挪开后松开了鼠标键。那么这时候这个链接就仅仅发生了mousedown事件。类似的,用户在点击鼠标之后挪到了链接上,那么链接就仅有mouseup发生。这两种情况都没有click事件发生。
这是不是一个问题取决于用户的行为。但是你应该注册onmousedown/up事件,除非你就是完全想click发生。
如果你用了弹出警示框的话,浏览器可能会丢失事件发生的轨迹和发生了多少次,会引起混乱。所以最好别用那个。
Dblclick
dblclick事件很少用。如果你要用的话一定不要把onclick和dblclick的事件处理程序注册在一个HTML元素上。如果两个都注册了的话你要知道用户到底干什么是一件基本上不可能的事情。
总之,当用户在一个元素上双击的时候click事件总是发生在dblclick之前。另外,在Netscape中,第二个click总是会在dblclick之前被分开处理。不管怎样,警示框在这是很危险的。
所以保证你的click和dblclick很好的分离能避免很多复杂的事情。
Mousemove
mousemove事件运行的很好,但是需要注意的是那可能需要很多的系统资源来处理所有的mousemove事件。当用户把鼠标移动一个像素,mousemove就触发一次。就算什么都没发生,长而复杂的函数也要耗费很长的时间会影响网站的效率:所有的事情都会变慢,尤其在那些老古董上。
所以最好的办法就是当你需要的时候注册onmousemove事件,在不用的时候尽快移除:

复制代码 代码如下:

element.onmousemove = doSomething;
// later
element.onmousemove = null;

Mouseover和mouseout
再看看这个例子,换成mouserover然后试试。这个例子只是在ev3上添加了onmouseover的事件处理程序。然而你会注意到不仅仅在ev3上会触发事件在ev4或者span上都会触发。在Mozilla 1.3之前,当鼠标进入一个文本区域的时候都会触发。
原因当然就是事件冒泡。用户在ev4上触发了mouseover事件。在这个元素上没有onmouseover事件处理程序,但是在ev3上有。所以当事件冒泡到ev3上的时候,程序就执行了。
现在这样的设置虽然都完全正确,但是还有一个问题。首要问题就是目标。假设鼠标进入了ev4:
-----------------------------------------
| This is div id="ev3" |
| ----------------------------- |
| | This is div id="ev4" | |
| | -------- <-------- |
| | | span | | |

| | -------- | |
| ----------------------------- |
-----------------------------------------
<--------: mouse movement
现在这个事件的target/srcElement就是ev4:就是事件发生的元素,因为鼠标移动到了他上面。但是当下面的发生时候:
-----------------------------------------
| This is div id="ev3" |
| ----------------------------- |
| | This is div id="ev4" | |
| | -------- | |
| | | span | | |
| | | --------> | |
| | -------- | |
| ----------------------------- |
-----------------------------------------
-------->: mouse movement
这个事件的target/srcElement是一样的。在这一样还是鼠标进入ev4。然而你可能会当鼠标从ev3来或者从SPAN来的时候做不同的事。所以我们需要知道鼠标到底从哪来的。
relatedTarget,fromElement,toElement
W3C把relatedTarget属性加进了mouseover和mouseout事件中。在mouseover事件下就是包括鼠标从哪来,在mouseout下就是包括鼠标到哪去。
微软也有包含以下信息的两个属性:
1、fromElement指的是鼠标来之前的元素。在mouseover的状况下比较有用
2、toElement表示鼠标将要去的那个元素。在mouseout的情况下比较有用。
在我们的第一个例子里面,relatedTarget/fromElement包含一个ev3的引用,在我们的第二个例子是SPAN。现在你就知道鼠标的来源了。
跨浏览器的代码
所以如果你想在mouseover的情况下想知道鼠标从哪来,那么:

复制代码 代码如下:

function doSomething(e) {
if (!e) var e = window.event;
var relTarg = e.relatedTarget || e.fromElement;
}

如果在mouseout的情况下想知道鼠标的去向那么:

复制代码 代码如下:

function doSomething(e) {
if (!e) var e = window.event;
var relTarg = e.relatedTarget || e.toElement;
}

鼠标离开一个层
在一个基于层的导航菜单里面你可能需要知道鼠标什么时候离开层这样你才能把那个层关闭。所以你给这个层的onmouseout注册了一个事件处理程序。然后事件冒泡会导致当鼠标离开任意一个层的时候都会触发这个onmouseout。
--------------
| Layer |.onmouseout = doSomething;
| -------- |
| | Link | ----> We want to know about this mouseout

| -------- |
| -------- |
| | Link | |
| | ----> | but not about this one
| -------- |
--------------
---->: mouse movement
另外的一个停止的方法是当你把鼠标移入这个层,然后到了一个链接上,浏览器就在这个层上注册一个mouseout事件。这个让我很不明白(鼠标依然在层里),但是所有的浏览器都没问题。
那么我们如何在鼠标真正离开的层的时候让mouseout发生呢?

复制代码 代码如下:

function doSomething(e) {
if (!e) var e = window.event;
var tg = (window.event) ? e.srcElement : e.target;
if (tg.nodeName != 'DIV') return;
var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
while (reltg != tg && reltg.nodeName != 'BODY')
reltg= reltg.parentNode
if (reltg== tg) return;
// Mouseout took place when mouse actually left layer
// Handle event
}

首先得到事件的target,也就是鼠标离开的元素。如果target不是DIV(层),理解结束函数,因为鼠标没有真正离开层。
如果target是层,我们不能确定鼠标时离开层了还是进入了层里面的一个链接。所以要再检查事件的relatedTarget/toElement,也就是鼠标移向的那个元素。
我们读取这个元素,然后我们通过DOM树向上遍历,直到事件的target(也就是DIV),或者BODY元素。
如果我们遇到的target是层的子元素,那么鼠标就没有离开层。就停止函数的运行。
当函数通过所有的验证我们就能确定鼠标确实离开了层,我们就能开始应该的动作了(通常是隐藏这个层)。

Mouseenter和mouseleave
微软还有个解决办法。他添加了两个新的事件mouseenter和mouseleave。除了对事件冒泡不反应以外基本上和mouseover和mouseout是一样的。他们把注册了事件的元素看成一个整块,对于发生在块内的
mouseover和mouseout不做反应。
所以这两个事件也解决了我们的问题:他们只对绑定的元素做出mouseover/out反应。
现在这两个事件只被版本在5.5以上的IE支持。或许其他浏览器哪天回借鉴下。
结尾
现在已经到了Event的介绍的尾声了。好运!
原文地址:http://www.quirksmode.org/js/events_mouse.html
我的Twitter:@rehawk

时间: 2024-09-23 16:01:44

JavaScript Event学习第九章 鼠标事件_javascript技巧的相关文章

JavaScript Event学习第二章 Event浏览器兼容性_javascript技巧

在这里提出的事件,当他们发生在一个确定的HTML元素上的时候,他们的名字能够被大多数的浏览器所识别.也就是说,浏览器会查找你为这个HTML元素所注册的事件处理程序的脚本,而且会被立即执行.      一开始只有为数很少的一些事件.这些事件在几乎所有的JavaScript浏览器都能运行,即使是那些非常古老的.需要注意的是那些早期的事件只能工作在链接或者表单上,有时候也能运行在整个窗口上,但是其他的大多数HTML元素不行.      时代变迁,很多新的事件也给大家介绍过了.第四代浏览器和更高级的浏览

JavaScript event对象整理及详细介绍_javascript技巧

Event属性和方法: 1. type:事件的类型,如onlick中的click: 2. srcElement/target:事件源,就是发生事件的元素: 3. button:声明被按下的鼠标键,整数,1代表左键,2代表右键,4代表中键,如果按下多个键,酒把这些值加起来,所以3就代表左右键同时按下:(firefox中 0代表左键,1代表中间键,2代表右键) 4. clientX/clientY:事件发生的时候,鼠标相对于浏览器窗口可视文档区域的左上角的位置:(在DOM标准中,这两个属性值都不考虑

JavaScript DOM 学习第九章 选取范围的介绍_基础知识

虽然我们会讲解用程序创建范围对象,但是我们把精力主要集中在如何将用户的选取范围转换成为W3C 范围或者微软的文档范围对象.   什么是范围 范围是指HTML文档中的任意一部分内容.一个范围的开始和结束点都可以是随意的,甚至是相同的(一个空范围).最常见的范围就是用户选取的文本.当用户在页面上选取了一部分,你就可以他的选取部分转换为范围对象.然而,你也可以让程序自动选择范围. 让我们以下面的代码为例.假设用户选择了下面的文字: <h4 id="entry1196"><a

javascript 按回车键相应按钮提交事件_javascript技巧

1.使用提交按钮提交,在form表单中的onsubmit事件进行表单验证: 复制代码 代码如下: <script type="text/javascript"> function onSub(){ //表单验证代码 } </script> <form action="" method="" onsubmit="javascript:onSub();"> 2.使用button或图片的oncli

JavaScript 监听textarea中按键事件_javascript技巧

有个textarea, Java代码 复制代码 代码如下: <textarea id="text"></textarea> 经常会定义onKeyPress="keypress();",并定义以下方法. 复制代码 代码如下: var keypress = function(e){ var e = e || window.event; var k = e.keyCode; } 这里我使用的办法是JQuery. 复制代码 代码如下: $("

JavaScript设计模式学习之“类式继承”_javascript技巧

在做一件事情之前,首先要清楚做这件事情的好处有什么,相信不会有哪个人愿意无缘无故的去做事情.一般说来,我们在设计类的时候,实际上就是希望能减少重复性的代码,使用继承可以完美的做到这一点,借助继承机制,你可以在现有类的基础上再次进行设计并且充分利用它们已经具备的各种方法,而对设计的修改也更为轻松.废话不多说了,举例说明: 复制代码 代码如下: function Person(name){     this.name = name; } Person.prototype.getname = func

学习JavaScript鼠标响应事件_javascript技巧

本文为大家分享了一个简单的鼠标模拟案例,供大家参考,具体实现内容如下 如何实现捕抓鼠标事件,当鼠标滑动时,获取当前鼠标的坐标,接着在一个透明区域里绑定捕抓的位移,这样就能在模拟的透明区域里实现鼠标滑动的模型. 效果图: HTML代码: <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title> the mouse </title> <link r

JavaScript Event学习第十章 一些可替换的事件对_javascript技巧

测试的局限性 这一章我们打算寻找哪些事件可以用来仿真鼠标事件.注意这一系列测试不包括屏幕阅读器.因为我不能满足所有的条件,因此测试也有局限性.这个测试目标仅仅只是那些在图形界面下的浏览器中不使用鼠标的用户. 我假设这些测试一样可以用来在一些移动设备上.因为条件不足,所以也不能测试.很多时候在移动设备上表现总是不尽如人意. 总结 不幸的是,我们不能制定一个严格的鼠标事件和非鼠标的一对一的方案,因为非鼠标事件和鼠标事件有很多不同.所以下面的建议在大多数场合适用,但不是所有. 下面就是我的测试结果:

浅析javascript中的Event事件_javascript技巧

1.焦点:当一个元素有焦点的时候,那么他就可以接受用户的输入(不是所有元素都能接受焦点) 给元素设置焦点的方式:    1.点击 2.tab 3.js 2.(例子:输入框提示文字) onfocus:当元素获取焦点时触发:        element.onfocus = function(){};   onblur:当元素失去焦点时触发:        element.onblur = function(){};    obj.focus() 给指定的元素设置焦点 obj.blur() 取消指定