JavaScript 筆記 —— 鼠標事件的瀏覽器差異

haoguo 發布于2019-08-21 10:25 / 410人閱讀

摘要：本文總結一下，鼠標事件在不同瀏覽器實現的差異。和相關元素差異和是級事件當中的其中兩個事件。標準事件對象使用屬性來識別鼠標按鍵。該事件當中的值與事件對象當中的作用相同。

鼠標是我們在 PC 端瀏覽網頁時候最重要的交互工具，因此鼠標事件也是 Web 開發當中最常用的一類事件。然而，由于各種原因，不同廠商或者不同版本的瀏覽器之間對于鼠標事件的實現也有所不同。本文總結一下，鼠標事件在不同瀏覽器實現的差異。

mouseover 和 mouseout 相關元素差異

mouseover 和 mouseout 是 DOM3 級事件當中的其中兩個事件。

mouseover 是當鼠標指針在該目標元素外部，然后用戶將鼠標首次移入目標元素的邊界時觸發的事件。

mouseout 是當鼠標指針在當前元素上方，然后用戶將鼠標移入另一個元素時觸發的事件。另一個元素可以位于當前元素的外部，也可以是當前元素的子元素。

可以看出上述兩個事件都是在描述從一個元素移動到另一個元素的情況，因此參與事件有兩個元素，這個時候我們就需要了解除了目標元素之外還有哪一個元素參加了事件。

標準事件對象 event 包含了名為 relatedTarget 的屬性，提供相關元素的信息，只有在 mouseover 和 mouseout 當中該屬性才包含元素的信息，在其他事件當中它的值為 null。

有如下 HTMl：




    
    demo

為 myDiv 分別綁定 mouseover 和 mouseout 事件。

var div = document.getElmentById("myDiv");
div.addEventListener("mouseover", function(event) {
    alert("Mouse comes from " + event.relatedTarget.tagName);
    // 觸發事件，彈出 "Mouse comes from BODY"
}, false);

var div = document.getElementById("myDiv");
div.addEventListener("mouseout", function(event) {
    alert("Mouse moves to " + event.relatedTarget.tagName);
    // 觸發事件，彈出 "Mouse moves to BODY"
}, false);

IE8 或之前的版本不支持 relatedTarget 屬性，我們需要使用另一個屬性訪問相關元素。當 mouseover 事件觸發時，IE 事件對象當中 fromElement 保存相關元素；當 mouseout 事件觸發時，IE 事件對象當中 toElement 保存相關元素。

延續上面的例子，為 myDiv 分別綁定 mouseover 和 mouseout 事件。

var div = document.getElementById("myDiv");
div.attachEvent("onmouseover", function(event) {
    alert("Mouse comes from " + event.fromElement.tagName);
    // IE 瀏覽器中觸發事件，彈出 "Mouse comes from BODY"
});

var div = document.getElementById("myDiv");
div.attachEvent("onmouseout", function(event) {
    alert("Mouse moves to " + event.toElement.tagName);
    // IE 瀏覽器中觸發事件，彈出 "Mouse moves to BODY"
});

鼠標按鍵信息差異

現在的鼠標通常包含3個按鍵，左鍵、右鍵和中間的鍵，在開發過程當中我們可能會需要知道用戶按下的是鼠標的哪一個鍵。

標準事件對象使用 button 屬性來識別鼠標按鍵。0 表示主鼠標按鈕（一般為左鍵），1 表示中間的按鈕，2 表示次鼠標按鈕（一般為右鍵）。

延續上面的例子，為 myDiv 綁定 mousedown 事件。

var div = document.getElementById("myDiv");
div.addEventListener("mousedown", function (event) {
    alert(event.button);    // 根據按鍵不同分別出現值 0，1，2
}, false);

IE8 或之前的版本中的事件對象同樣提供了 button 屬性，但是該屬性的值與標準事件對象有所不同。

0 表示沒有按下按鈕。

1 表示按下主鼠標按鈕（一般為左鍵）。

2 表示按下次鼠標按鈕（一般為右鍵）。

3 表示同時按下主、次鼠標按鈕。

4 表示按下中間按鈕。

5 表示同時按下主鼠標按鈕和中間按鈕。

6 表示同時按下次鼠標按鈕和中間按鈕。

7 表示同時按下了三個按鈕

IE事件對象中 button 同時考慮到了兩個或多個按鈕同時按下的情形，雖然這樣的操作并不常見。

鼠標滾輪事件差異

mousewheel 事件是用戶使用鼠標滾輪滾動的時候觸發的事件，該事件的兼容性比較好，IE6.0 就已經實現。

在鼠標滾輪的事件當中，我們通常會希望知道用戶是向前還是向后滾動滾輪，mousewheel 事件對象當中包含一個 wheelDelta 屬性，當用戶向前滾動滾輪時，wheelDelta 的值為 120 的倍數；當用戶向后滾動滾輪時，wheelDelta 的值為 -120 的倍數。

var div = document.getElementById("myDiv");
div.addEventListener("mousewheel", function (event) {
    alert(event.wheelDelta);   // 120 或 -120
}, false);

有一個需要注意的點，在 Opera 9.5 之前的版本，wheelDelta 的值與標準的值符號相反。

在 FireFox 瀏覽器當中，除了 mousewheel 事件以外還有一個表示鼠標滾動的事件 DOMMouseScroll。該事件當中 detail 的值與 mousewheel 事件對象當中的 wheelDelta 作用相同。

不同的是鼠標向前滾動時 detail 值為 -3，向后滾動時 detail 值為 3。

// FireFox 瀏覽器當中
var div = document.getElementById("myDiv");
div.addEventListener("DOMMouseScroll", function (event) {
    alert(event.detail); // -3 或 3
}, false);

感謝您的閱讀，有不足之處請為我指出。

參考

JavaScript高級程序設計(第3版)

本文同步于我的個人博客 http://blog.acwong.org/2015/01/19/different-of-mouse-event/

GPU云服務器云服務器 html的鼠標事件 javascript的事件鼠標點擊事件鼠標滾輪事件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85495.html

JavaScript MVC 學習筆記（五）事件操作的拓展

摘要：事件類型布爾值，表示事件是否通過以冒泡形式觸發。表示鍵盤事件的屬性布爾值，表示當前按下的鍵是否表示一個字符。表示當前按鍵的值僅對事件有效。，事件發生時相對于屏幕的坐標。事件對象 event 對象還包含很多有用的屬性。W3C 范中包含的大部分屬性都列在下面，更多信息參照完整的標準規范。事件類型： bubbles ：布爾值，表示事件是否通過DOM 以冒泡形式觸發。事件發生時...

Anshiii 2019-08-22 10:56 評論0 收藏0
js基礎知識筆記

摘要：常見內存泄漏情形全局變量被忘記的或者閉包引用閉包概念有權訪問另一個函數作用域的變量的函數。會話存儲刷新頁面依舊存在，與在持久上不同外，其余一致。請求向指定的資源提交被處理的數據，數據量和類型沒限制，不主動緩存，頁面刷新數據會被重新提交。 defer 腳本延遲執行，適用于外部腳本文件async 立即下載，不保證順序（建議不修改DOM，避免重繪） CDN加速 (Content De...

李文鵬 2019-08-23 12:13 評論0 收藏0
vue2.0學習筆記（事件處理）

摘要：請記住，會告訴瀏覽器你不想阻止事件的默認行為。而單單釋放也不會觸發事件。修飾符修飾符允許你控制由精確的系統修飾符組合觸發的事件。當一個被銷毀時，所有的事件處理器都會自動被刪除。 1、監聽事件用 v-on 指令監聽 DOM 事件，并在觸發時運行一些 JavaScript 代碼。 Add 1 The button above has been clicked {{ counte...

bovenson 2019-08-23 18:35 評論0 收藏0
【30分鐘學完】canvas動畫|游戲基礎(1)：理論先行

摘要：所建議的刷新率是秒幀，大部分瀏覽器是遵循這一標準的。基于時間的動畫其實無論是還是定時器，都不能保證以特定速率播放。將物體每幀移動距離，轉變為物體每秒移動距離。前言本文雖說是基礎教程，但這是相對動畫/游戲領域來說，在前端領域算是中級教程了，不適合前端小白或萌新。閱讀前請確保自己對前端三大件（JavaScript+CSS+HTML）的基礎已經十分熟悉，而且有高中水平的數學和物理知識。d...

wind5o 2019-08-02 16:28 評論0 收藏0
【30分鐘學完】canvas動畫|游戲基礎(1)：理論先行

摘要：所建議的刷新率是秒幀，大部分瀏覽器是遵循這一標準的。基于時間的動畫其實無論是還是定時器，都不能保證以特定速率播放。將物體每幀移動距離，轉變為物體每秒移動距離。前言本文雖說是基礎教程，但這是相對動畫/游戲領域來說，在前端領域算是中級教程了，不適合前端小白或萌新。閱讀前請確保自己對前端三大件（JavaScript+CSS+HTML）的基礎已經十分熟悉，而且有高中水平的數學和物理知識。d...

wemall 2019-08-22 15:41 評論0 收藏0