|
|
瀏覽器的兼容性問(wèn)題，可以在瀏覽器兼容性列表查看。
例子
這里有一個(gè)例子?？梢詭椭斫庀旅娴膬?nèi)容。
mousedown，mouseup，click和dblclick在這個(gè)鏈接上注冊(cè)。可以再下面的文本框里面查看。或者在對(duì)話框里面。（請(qǐng)?jiān)谠睦飮L試：http://www.quirksmode.org/js/events_mouse.htm）
Mousedown,mouseup,click
如果用戶在一個(gè)元素上點(diǎn)擊，那么最少三個(gè)事件會(huì)被觸發(fā)，順序是這樣的：
1、mousedown,當(dāng)用戶在這個(gè)元素上按下鼠標(biāo)鍵的時(shí)候
2、mouseup，當(dāng)用戶在這個(gè)元素上松開(kāi)鼠標(biāo)鍵的時(shí)候
3、click，當(dāng)一個(gè)mousedown和一個(gè)mouseup都在這個(gè)元素上被檢測(cè)到的時(shí)候發(fā)生
通常mousedown和mouseup比click有用。有些瀏覽器不允許你讀取onclick的事件信息。而且有時(shí)候用戶用鼠標(biāo)做出某些動(dòng)作click事件沒(méi)有跟上。
假設(shè)用戶在一個(gè)鏈接上按下了鼠標(biāo)鍵，然后把鼠標(biāo)挪開(kāi)了并且挪開(kāi)后松開(kāi)了鼠標(biāo)鍵。那么這時(shí)候這個(gè)鏈接就僅僅發(fā)生了mousedown事件。類(lèi)似的，用戶在點(diǎn)擊鼠標(biāo)之后挪到了鏈接上，那么鏈接就僅有mouseup發(fā)生。這兩種情況都沒(méi)有click事件發(fā)生。
這是不是一個(gè)問(wèn)題取決于用戶的行為。但是你應(yīng)該注冊(cè)onmousedown/up事件，除非你就是完全想click發(fā)生。
如果你用了彈出警示框的話，瀏覽器可能會(huì)丟失事件發(fā)生的軌跡和發(fā)生了多少次，會(huì)引起混亂。所以最好別用那個(gè)。
Dblclick
dblclick事件很少用。如果你要用的話一定不要把onclick和dblclick的事件處理程序注冊(cè)在一個(gè)HTML元素上。如果兩個(gè)都注冊(cè)了的話你要知道用戶到底干什么是一件基本上不可能的事情。
總之，當(dāng)用戶在一個(gè)元素上雙擊的時(shí)候click事件總是發(fā)生在dblclick之前。另外，在NETscape中，第二個(gè)click總是會(huì)在dblclick之前被分開(kāi)處理。不管怎樣，警示框在這是很危險(xiǎn)的。
所以保證你的click和dblclick很好的分離能避免很多復(fù)雜的事情。
Mousemove
mousemove事件運(yùn)行的很好，但是需要注意的是那可能需要很多的系統(tǒng)資源來(lái)處理所有的mousemove事件。當(dāng)用戶把鼠標(biāo)移動(dòng)一個(gè)像素，mousemove就觸發(fā)一次。就算什么都沒(méi)發(fā)生，長(zhǎng)而復(fù)雜的函數(shù)也要耗費(fèi)很長(zhǎng)的時(shí)間會(huì)影響網(wǎng)站的效率：所有的事情都會(huì)變慢，尤其在那些老古董上。
所以最好的辦法就是當(dāng)你需要的時(shí)候注冊(cè)onmousemove事件，在不用的時(shí)候盡快移除：
復(fù)制代碼 代碼如下:element.onmousemove = doSomething;
// later
element.onmousemove = null;
Mouseover和mouseout
再看看這個(gè)例子，換成mouserover然后試試。這個(gè)例子只是在ev3上添加了onmouseover的事件處理程序。然而你會(huì)注意到不僅僅在ev3上會(huì)觸發(fā)事件在ev4或者span上都會(huì)觸發(fā)。在Mozilla 1.3之前，當(dāng)鼠標(biāo)進(jìn)入一個(gè)文本區(qū)域的時(shí)候都會(huì)觸發(fā)。
原因當(dāng)然就是事件冒泡。用戶在ev4上觸發(fā)了mouseover事件。在這個(gè)元素上沒(méi)有onmouseover事件處理程序，但是在ev3上有。所以當(dāng)事件冒泡到ev3上的時(shí)候，程序就執(zhí)行了。
現(xiàn)在這樣的設(shè)置雖然都完全正確，但是還有一個(gè)問(wèn)題。首要問(wèn)題就是目標(biāo)。假設(shè)鼠標(biāo)進(jìn)入了ev4：
-----------------------------------------
| This is div id="ev3" |
| ----------------------------- |
| | This is div id="ev4" | |
| | -------- <-------- |
| | | span | | |
| | -------- | |
| ----------------------------- |
-----------------------------------------
<--------: mouse movement
現(xiàn)在這個(gè)事件的target/srcElement就是ev4：就是事件發(fā)生的元素，因?yàn)槭髽?biāo)移動(dòng)到了他上面。但是當(dāng)下面的發(fā)生時(shí)候：
-----------------------------------------
| This is div id="ev3" |
| ----------------------------- |
| | This is div id="ev4" | |
| | -------- | |
| | | span | | |
| | | --------> | |
| | -------- | |
| ----------------------------- |
-----------------------------------------
-------->: mouse movement
這個(gè)事件的target/srcElement是一樣的。在這一樣還是鼠標(biāo)進(jìn)入ev4。然而你可能會(huì)當(dāng)鼠標(biāo)從ev3來(lái)或者從SPAN來(lái)的時(shí)候做不同的事。所以我們需要知道鼠標(biāo)到底從哪來(lái)的。
relatedTarget,fromElement,toElement
W3C把relatedTarget屬性加進(jìn)了mouseover和mouseout事件中。在mouseover事件下就是包括鼠標(biāo)從哪來(lái)，在mouseout下就是包括鼠標(biāo)到哪去。
微軟也有包含以下信息的兩個(gè)屬性：
1、fromElement指的是鼠標(biāo)來(lái)之前的元素。在mouseover的狀況下比較有用
2、toElement表示鼠標(biāo)將要去的那個(gè)元素。在mouseout的情況下比較有用。
在我們的第一個(gè)例子里面，relatedTarget/fromElement包含一個(gè)ev3的引用，在我們的第二個(gè)例子是SPAN。現(xiàn)在你就知道鼠標(biāo)的來(lái)源了。
跨瀏覽器的代碼
所以如果你想在mouseover的情況下想知道鼠標(biāo)從哪來(lái)，那么：
復(fù)制代碼 代碼如下:
function doSomething(e) {
if (!e) var e = window.event;
var relTarg = e.relatedTarget || e.fromElement;
}
如果在mouseout的情況下想知道鼠標(biāo)的去向那么：
復(fù)制代碼 代碼如下:
function doSomething(e) {
if (!e) var e = window.event;
var relTarg = e.relatedTarget || e.toElement;
}
鼠標(biāo)離開(kāi)一個(gè)層
在一個(gè)基于層的導(dǎo)航菜單里面你可能需要知道鼠標(biāo)什么時(shí)候離開(kāi)層這樣你才能把那個(gè)層關(guān)閉。所以你給這個(gè)層的onmouseout注冊(cè)了一個(gè)事件處理程序。然后事件冒泡會(huì)導(dǎo)致當(dāng)鼠標(biāo)離開(kāi)任意一個(gè)層的時(shí)候都會(huì)觸發(fā)這個(gè)onmouseout。
--------------
| Layer |.onmouseout = doSomething;
| -------- |
| | Link | ----> We want to know about this mouseout
| -------- |
| -------- |
| | Link | |
| | ----> | but not about this one
| -------- |
--------------
---->: mouse movement
另外的一個(gè)停止的方法是當(dāng)你把鼠標(biāo)移入這個(gè)層，然后到了一個(gè)鏈接上，瀏覽器就在這個(gè)層上注冊(cè)一個(gè)mouseout事件。這個(gè)讓我很不明白（鼠標(biāo)依然在層里），但是所有的瀏覽器都沒(méi)問(wèn)題。
那么我們?nèi)绾卧谑髽?biāo)真正離開(kāi)的層的時(shí)候讓mouseout發(fā)生呢？
復(fù)制代碼 代碼如下: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，也就是鼠標(biāo)離開(kāi)的元素。如果target不是DIV（層），理解結(jié)束函數(shù)，因?yàn)槭髽?biāo)沒(méi)有真正離開(kāi)層。
如果target是層，我們不能確定鼠標(biāo)時(shí)離開(kāi)層了還是進(jìn)入了層里面的一個(gè)鏈接。所以要再檢查事件的relatedTarget/toElement，也就是鼠標(biāo)移向的那個(gè)元素。
我們讀取這個(gè)元素，然后我們通過(guò)DOM樹(shù)向上遍歷，直到事件的target（也就是DIV），或者BODY元素。
如果我們遇到的target是層的子元素，那么鼠標(biāo)就沒(méi)有離開(kāi)層。就停止函數(shù)的運(yùn)行。
當(dāng)函數(shù)通過(guò)所有的驗(yàn)證我們就能確定鼠標(biāo)確實(shí)離開(kāi)了層，我們就能開(kāi)始應(yīng)該的動(dòng)作了（通常是隱藏這個(gè)層）。
Mouseenter和mouseleave
微軟還有個(gè)解決辦法。他添加了兩個(gè)新的事件mouseenter和mouseleave。除了對(duì)事件冒泡不反應(yīng)以外基本上和mouseover和mouseout是一樣的。他們把注冊(cè)了事件的元素看成一個(gè)整塊，對(duì)于發(fā)生在塊內(nèi)的
mouseover和mouseout不做反應(yīng)。
所以這兩個(gè)事件也解決了我們的問(wèn)題：他們只對(duì)綁定的元素做出mouseover/out反應(yīng)。
現(xiàn)在這兩個(gè)事件只被版本在5.5以上的IE支持。或許其他瀏覽器哪天回借鑒下。
結(jié)尾
現(xiàn)在已經(jīng)到了Event的介紹的尾聲了。好運(yùn)！
原文地址：http://www.quirksmode.org/js/events_mouse.html
我的Twitter:@rehawk
JavaScript技術(shù)：JavaScript Event學(xué)習(xí)第九章 鼠標(biāo)事件，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
