滑鼠事件在瀏覽器的差異

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 
12style
>
13head
>
14<
body
>
15<
div 
id="mydiv"
>
16div
>
17<
script 
src="demo.js"
>
script
>
18body
>
19html
>

js**:

1

var div = document.getelmentbyid("mydiv");
23 div.addeventlistener("mouseover", function
(event) , false
);10
11var div = document.getelementbyid("mydiv");
1213 div.addeventlistener("mouseout", function
(event) , false);

ie8 或之前的版本不支援 relatedtarget 屬性，我們需要使用另乙個屬性訪問相關元素。

ie使用時的js**:

var div = document.getelementbyid("mydiv");

div.attachevent("onmouseover", function
(event) );
var div = document.getelementbyid("mydiv");
div.attachevent("onmouseout", function
(event) );

滑鼠通常包含3個按鍵，左鍵、右鍵和中間的鍵，獲取滑鼠按下哪乙個鍵可用event事件中的button

標準事件物件使用 button 屬性來識別滑鼠按鍵。

demo:

1

var div = document.getelementbyid("mydiv");
23 div.addeventlistener("mousedown", function
(event) , false);

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

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

mousewheel 事件是使用滑鼠滾輪滾動的時候觸發的事件，該事件的相容性比較好，ie6.0 就已實現。

ousewheel 事件物件當中包含乙個 wheeldelta 屬性，

demo:

1

var div = document.getelementbyid("mydiv");
23 div.addeventlistener("mousewheel", function
(event) , false);

注意點:在 opera 9.5 之前的版本，wheeldelta 的值與標準的值符號相反。

在 firefox 瀏覽器當中，除了 mousewheel 事件外還有乙個表示滑鼠滾動的事件 dommousescroll。dommousescroll事件當中 detail 的值與 mousewheel 事件物件當中的 wheeldelta 作用相同。

不同點:

demo:

1

//firefox 瀏覽器當中23
var div = document.getelementbyid("mydiv");
45 div.addeventlistener("dommousescroll", function
(event) , false);

IE與其他瀏覽器處理滑鼠事件的差異

最近在做些web前台js時，需要做使用者滑鼠事件和按鍵狀態進行判斷，因此重新做了一次幾大瀏覽器處理滑鼠事件的差異測試，我把測試結果寫在這裡，供今後遇到類似問題的朋友們參考，少做重複工作。瀏覽器 ie8 firefox opera chrome 按鍵值定義差異 ie8 0 無按鍵，1 左鍵，2 右鍵，...

瀏覽器差異

移動端瀏覽器沒報錯無法看報錯資訊 移動端真機除錯，引入vconsole array.prototype.slice.call document.getelementbyid test childnodes 用上面的方法可以把 id 為 test 的子節點轉換成陣列 ie8及之前不能直接這樣使用 解決...

瀏覽器css差異

一 css選擇器差異 乙個css的ie和ff差異，popup container alert 在ie6下alert類只能作用於 popup container的子元素。ff下alert類可以作用於 popup container和其子元素。二 z index在ie中的迷惑 z index屬性適用於定...