資訊專欄INFORMATION COLUMN
摘要：本文總結(jié)一下，鼠標(biāo)事件在不同瀏覽器實(shí)現(xiàn)的差異。和相關(guān)元素差異和是級(jí)事件當(dāng)中的其中兩個(gè)事件。標(biāo)準(zhǔn)事件對(duì)象使用屬性來(lái)識(shí)別鼠標(biāo)按鍵。該事件當(dāng)中的值與事件對(duì)象當(dāng)中的作用相同。
鼠標(biāo)是我們?cè)?PC 端瀏覽網(wǎng)頁(yè)時(shí)候最重要的交互工具，因此鼠標(biāo)事件也是 Web 開(kāi)發(fā)當(dāng)中最常用的一類事件。然而，由于各種原因，不同廠商或者不同版本的瀏覽器之間對(duì)于鼠標(biāo)事件的實(shí)現(xiàn)也有所不同。本文總結(jié)一下，鼠標(biāo)事件在不同瀏覽器實(shí)現(xiàn)的差異。
mouseover 和 mouseout 相關(guān)元素差異mouseover 和 mouseout 是 DOM3 級(jí)事件當(dāng)中的其中兩個(gè)事件。
mouseover 是當(dāng)鼠標(biāo)指針在該目標(biāo)元素外部，然后用戶將鼠標(biāo)首次移入目標(biāo)元素的邊界時(shí)觸發(fā)的事件。
mouseout 是當(dāng)鼠標(biāo)指針在當(dāng)前元素上方，然后用戶將鼠標(biāo)移入另一個(gè)元素時(shí)觸發(fā)的事件。另一個(gè)元素可以位于當(dāng)前元素的外部，也可以是當(dāng)前元素的子元素。
可以看出上述兩個(gè)事件都是在描述從一個(gè)元素移動(dòng)到另一個(gè)元素的情況，因此參與事件有兩個(gè)元素，這個(gè)時(shí)候我們就需要了解除了目標(biāo)元素之外還有哪一個(gè)元素參加了事件。
標(biāo)準(zhǔn)事件對(duì)象 event 包含了名為 relatedTarget 的屬性，提供相關(guān)元素的信息，只有在 mouseover 和 mouseout 當(dāng)中該屬性才包含元素的信息，在其他事件當(dāng)中它的值為 null。
有如下 HTMl：
demo
為 myDiv 分別綁定 mouseover 和 mouseout 事件。
var div = document.getElmentById("myDiv");
div.addEventListener("mouseover", function(event) {
alert("Mouse comes from " + event.relatedTarget.tagName);
// 觸發(fā)事件，彈出 "Mouse comes from BODY"
}, false);
var div = document.getElementById("myDiv");
div.addEventListener("mouseout", function(event) {
alert("Mouse moves to " + event.relatedTarget.tagName);
// 觸發(fā)事件，彈出 "Mouse moves to BODY"
}, false);
IE8 或之前的版本不支持 relatedTarget 屬性，我們需要使用另一個(gè)屬性訪問(wèn)相關(guān)元素。當(dāng) mouseover 事件觸發(fā)時(shí)，IE 事件對(duì)象當(dāng)中 fromElement 保存相關(guān)元素；當(dāng) mouseout 事件觸發(fā)時(shí)，IE 事件對(duì)象當(dāng)中 toElement 保存相關(guān)元素。
延續(xù)上面的例子，為 myDiv 分別綁定 mouseover 和 mouseout 事件。
var div = document.getElementById("myDiv");
div.attachEvent("onmouseover", function(event) {
alert("Mouse comes from " + event.fromElement.tagName);
// IE 瀏覽器中觸發(fā)事件，彈出 "Mouse comes from BODY"
});
var div = document.getElementById("myDiv");
div.attachEvent("onmouseout", function(event) {
alert("Mouse moves to " + event.toElement.tagName);
// IE 瀏覽器中觸發(fā)事件，彈出 "Mouse moves to BODY"
});
鼠標(biāo)按鍵信息差異
現(xiàn)在的鼠標(biāo)通常包含3個(gè)按鍵，左鍵、右鍵和中間的鍵，在開(kāi)發(fā)過(guò)程當(dāng)中我們可能會(huì)需要知道用戶按下的是鼠標(biāo)的哪一個(gè)鍵。
標(biāo)準(zhǔn)事件對(duì)象使用 button 屬性來(lái)識(shí)別鼠標(biāo)按鍵。0 表示主鼠標(biāo)按鈕（一般為左鍵），1 表示中間的按鈕，2 表示次鼠標(biāo)按鈕（一般為右鍵）。
延續(xù)上面的例子，為 myDiv 綁定 mousedown 事件。
var div = document.getElementById("myDiv");
div.addEventListener("mousedown", function (event) {
alert(event.button); // 根據(jù)按鍵不同分別出現(xiàn)值 0，1，2
}, false);
IE8 或之前的版本中的事件對(duì)象同樣提供了 button 屬性，但是該屬性的值與標(biāo)準(zhǔn)事件對(duì)象有所不同。
0 表示沒(méi)有按下按鈕。
1 表示按下主鼠標(biāo)按鈕（一般為左鍵）。
2 表示按下次鼠標(biāo)按鈕（一般為右鍵）。
3 表示同時(shí)按下主、次鼠標(biāo)按鈕。
4 表示按下中間按鈕。
5 表示同時(shí)按下主鼠標(biāo)按鈕和中間按鈕。
6 表示同時(shí)按下次鼠標(biāo)按鈕和中間按鈕。
7 表示同時(shí)按下了三個(gè)按鈕
IE事件對(duì)象中 button 同時(shí)考慮到了兩個(gè)或多個(gè)按鈕同時(shí)按下的情形，雖然這樣的操作并不常見(jiàn)。
鼠標(biāo)滾輪事件差異mousewheel 事件是用戶使用鼠標(biāo)滾輪滾動(dòng)的時(shí)候觸發(fā)的事件，該事件的兼容性比較好，IE6.0 就已經(jīng)實(shí)現(xiàn)。
在鼠標(biāo)滾輪的事件當(dāng)中，我們通常會(huì)希望知道用戶是向前還是向后滾動(dòng)滾輪，mousewheel 事件對(duì)象當(dāng)中包含一個(gè) wheelDelta 屬性，當(dāng)用戶向前滾動(dòng)滾輪時(shí)，wheelDelta 的值為 120 的倍數(shù)；當(dāng)用戶向后滾動(dòng)滾輪時(shí)，wheelDelta 的值為 -120 的倍數(shù)。
var div = document.getElementById("myDiv");
div.addEventListener("mousewheel", function (event) {
alert(event.wheelDelta); // 120 或 -120
}, false);
有一個(gè)需要注意的點(diǎn)，在 Opera 9.5 之前的版本，wheelDelta 的值與標(biāo)準(zhǔn)的值符號(hào)相反。
在 FireFox 瀏覽器當(dāng)中，除了 mousewheel 事件以外還有一個(gè)表示鼠標(biāo)滾動(dòng)的事件 DOMMouseScroll。該事件當(dāng)中 detail 的值與 mousewheel 事件對(duì)象當(dāng)中的 wheelDelta 作用相同。
不同的是鼠標(biāo)向前滾動(dòng)時(shí) detail 值為 -3，向后滾動(dòng)時(shí) detail 值為 3。
// FireFox 瀏覽器當(dāng)中
var div = document.getElementById("myDiv");
div.addEventListener("DOMMouseScroll", function (event) {
alert(event.detail); // -3 或 3
}, false);
感謝您的閱讀，有不足之處請(qǐng)為我指出。
參考
JavaScript高級(jí)程序設(shè)計(jì)(第3版)
本文同步于我的個(gè)人博客 http://blog.acwong.org/2015/01/19/different-of-mouse-event/
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/85495.html
摘要：事件類型布爾值，表示事件是否通過(guò)以冒泡形式觸發(fā)。表示鍵盤事件的屬性布爾值，表示當(dāng)前按下的鍵是否表示一個(gè)字符。表示當(dāng)前按鍵的值僅對(duì)事件有效。，事件發(fā)生時(shí)相對(duì)于屏幕的坐標(biāo)。 事件對(duì)象 event 對(duì)象還包含很多有用的屬性。W3C 范中包含的大部分屬性都列在下面，更多信息參照完整的標(biāo)準(zhǔn)規(guī)范。 事件類型： bubbles ：布爾值，表示事件是否通過(guò)DOM 以冒泡形式觸發(fā)。 事件發(fā)生時(shí)...
摘要：常見(jiàn)內(nèi)存泄漏情形全局變量被忘記的或者閉包引用閉包概念有權(quán)訪問(wèn)另一個(gè)函數(shù)作用域的變量的函數(shù)。會(huì)話存儲(chǔ)刷新頁(yè)面依舊存在，與在持久上不同外，其余一致。請(qǐng)求向指定的資源提交被處理的數(shù)據(jù)，數(shù)據(jù)量和類型沒(méi)限制，不主動(dòng)緩存，頁(yè)面刷新數(shù)據(jù)會(huì)被重新提交。 defer 腳本延遲執(zhí)行，適用于外部腳本文件async 立即下載，不保證順序（建議不修改DOM，避免重繪） CDN加速 (Content De...
摘要：請(qǐng)記住，會(huì)告訴瀏覽器你不想阻止事件的默認(rèn)行為。而單單釋放也不會(huì)觸發(fā)事件。修飾符修飾符允許你控制由精確的系統(tǒng)修飾符組合觸發(fā)的事件。當(dāng)一個(gè)被銷毀時(shí)，所有的事件處理器都會(huì)自動(dòng)被刪除。 1、監(jiān)聽(tīng)事件 用 v-on 指令監(jiān)聽(tīng) DOM 事件，并在觸發(fā)時(shí)運(yùn)行一些 JavaScript 代碼。 Add 1 The button above has been clicked {{ counte...
摘要：所建議的刷新率是秒幀，大部分瀏覽器是遵循這一標(biāo)準(zhǔn)的?；跁r(shí)間的動(dòng)畫其實(shí)無(wú)論是還是定時(shí)器，都不能保證以特定速率播放。將物體每幀移動(dòng)距離，轉(zhuǎn)變?yōu)槲矬w每秒移動(dòng)距離。 前言 本文雖說(shuō)是基礎(chǔ)教程，但這是相對(duì)動(dòng)畫/游戲領(lǐng)域來(lái)說(shuō)，在前端領(lǐng)域算是中級(jí)教程了，不適合前端小白或萌新。閱讀前請(qǐng)確保自己對(duì)前端三大件（JavaScript+CSS+HTML）的基礎(chǔ)已經(jīng)十分熟悉，而且有高中水平的數(shù)學(xué)和物理知識(shí)。d...
摘要：所建議的刷新率是秒幀，大部分瀏覽器是遵循這一標(biāo)準(zhǔn)的?；跁r(shí)間的動(dòng)畫其實(shí)無(wú)論是還是定時(shí)器，都不能保證以特定速率播放。將物體每幀移動(dòng)距離，轉(zhuǎn)變?yōu)槲矬w每秒移動(dòng)距離。 前言 本文雖說(shuō)是基礎(chǔ)教程，但這是相對(duì)動(dòng)畫/游戲領(lǐng)域來(lái)說(shuō)，在前端領(lǐng)域算是中級(jí)教程了，不適合前端小白或萌新。閱讀前請(qǐng)確保自己對(duì)前端三大件（JavaScript+CSS+HTML）的基礎(chǔ)已經(jīng)十分熟悉，而且有高中水平的數(shù)學(xué)和物理知識(shí)。d...
閱讀 2313·2021-11-25 09:43
閱讀 2947·2019-08-30 15:52
閱讀 1901·2019-08-30 15:44
閱讀 986·2019-08-30 10:58
閱讀 766·2019-08-29 18:43
閱讀 3223·2019-08-29 18:36
閱讀 2325·2019-08-29 17:02
閱讀 1462·2019-08-29 17:01
