鼠标事件在浏览器的差异
?
剛剛看了一篇關于鼠標事件的文章,整理下用法....
?
-
鼠標事件是web開發最常用的一類事件,由于各種原因,不同開發商或者不同版本的瀏覽器之間對于鼠標事件的實現也有所不同.
- mouseover 和mouseout 相關元素差異
mouseover和mouseout是DOM3級事件當中的其中兩個事件:
mouseover是當鼠標指針在該目標元素外部,然后用戶將鼠標首次移入目標元素的邊緣時觸發的事件
mouseout是當鼠標指針在當前元素的上方,然后用戶將鼠標移入另一個元素時觸發的事件.另外一個元素可以位于當前元素的外部也可以是當前元素的子元素
兩個事件都是在描述從一個元素移動到另一個元素的情況，因此參與事件有兩個元素，目標元素就是事件源,獲得另外一個元素可以用evet事件:
標準事件對象 event 有個 relatedTarget 的屬性，提供相關元素的信息，只有在 mouseover 和 mouseout 當中該屬性才包含元素的信息，在其他事件當中它的值為 null.
舉個demo:
這是html代碼:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>demo</title> 6 <style> 7 #myDiv { 8 width: 200px; 9 height: 200px; 10 background-color: red; 11 } 12 </style> 13 </head> 14 <body> 15 <div id="myDiv"> 16 </div> 17 <script src="demo.js"></script> 18 </body> 19 </html>js代碼:
1 var div = document.getElmentById("myDiv"); 2 3 div.addEventListener("mouseover", function(event) { 4 5 alert("Mouse comes from " + event.relatedTarget.tagName); 6 7 // 觸發事件，彈出 "Mouse comes from BODY" 8 9 }, false); 10 11 var div = document.getElementById("myDiv"); 12 13 div.addEventListener("mouseout", function(event) { 14 15 alert("Mouse moves to " + event.relatedTarget.tagName); 16 17 // 觸發事件，彈出 "Mouse moves to BODY" 18 19 }, false);IE8 或之前的版本不支持 relatedTarget 屬性，我們需要使用另一個屬性訪問相關元素。
- 當 mouseover 事件觸發時，IE 事件對象當中 fromElement 保存相關元素；
- 當 mouseout 事件觸發時，IE 事件對象當中 toElement 保存相關元素。
IE使用時的js代碼:
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個按鍵，左鍵、右鍵和中間的鍵，獲取鼠標按下哪一個鍵可用event事件中的button
標準事件對象使用 button 屬性來識別鼠標按鍵。
- 0 表示主鼠標按鈕（一般為左鍵），
- 1 表示中間的按鈕，
- 2 表示次鼠標按鈕（一般為右鍵）。
demo:
1 var div = document.getElementById("myDiv"); 2 3 div.addEventListener("mousedown", function (event) { 4 5 alert(event.button); // 根據按鍵不同分別出現值 0，1，2 6 7 }, false);IE8 或之前的版本中的事件對象同樣提供了 button 屬性，但是該屬性的值與標準事件對象有所不同。
-
0 表示沒有按下按鈕。
-
1 表示按下主鼠標按鈕（一般為左鍵）。
-
2 表示按下次鼠標按鈕（一般為右鍵）。
-
3 表示同時按下主、次鼠標按鈕。
-
4 表示按下中間按鈕。
-
5 表示同時按下主鼠標按鈕和中間按鈕。
-
6 表示同時按下次鼠標按鈕和中間按鈕。
-
7 表示同時按下了三個按鈕
IE事件對象中 button 同時考慮到了兩個或多個按鈕同時按下的情形，雖然這樣的操作并不常見。
- 鼠標滾輪事件差異
? ? mousewheel 事件是使用鼠標滾輪滾動的時候觸發的事件，該事件的兼容性比較好，IE6.0 就已實現。
ousewheel 事件對象當中包含一個 wheelDelta 屬性，
- 向前滾動滾輪時，wheelDelta 的值為 120 的倍數；
- 向后滾動滾輪時，wheelDelta 的值為 -120 的倍數。
?demo:
1 var div = document.getElementById("myDiv"); 2 3 div.addEventListener("mousewheel", function (event) { 4 5 alert(event.wheelDelta); // 120 或 -120 6 7 }, false);注意點:在 Opera 9.5 之前的版本，wheelDelta 的值與標準的值符號相反。
在 FireFox 瀏覽器當中，除了 mousewheel 事件外還有一個表示鼠標滾動的事件 DOMMouseScroll。DOMMouseScroll事件當中 detail 的值與 mousewheel 事件對象當中的 wheelDelta 作用相同。
不同點:
- 向前滾動時 detail 值為 -3，
- 向后滾動時 detail 值為 3。
demo:
1 // FireFox 瀏覽器當中 2 3 var div = document.getElementById("myDiv"); 4 5 div.addEventListener("DOMMouseScroll", function (event) { 6 7 alert(event.detail); // -3 或 3 8 9 }, false);?
轉載于:https://www.cnblogs.com/xiaoyun1121/p/6038952.html
總結
以上是生活随笔為你收集整理的鼠标事件在浏览器的差异的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： fastboot 重启到recovery
- 下一篇： 2017年html5行业报告,云适配发布