W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
當指針設備(通常是鼠標)移動到連接了監(jiān)聽器的元素上時,會觸發(fā)mouseenter事件。
雖然類似mouseover,但它的不同之處在于它不會冒泡,并且當指針從其后代的物理空間之一移動到其自己的物理空間時,它不會被發(fā)送到任何后代。
輸入時,會向?qū)哟谓Y構的每個元素發(fā)送一個mouseenter事件。當指針到達文本時,此處將4個事件發(fā)送到層次結構的四個元素。
一個單獨的mouseover事件被發(fā)送到DOM樹的最深層元素,然后它會向?qū)哟谓Y構冒泡,直到它被處理程序取消或到達根目錄。
使用深層次結構,發(fā)送的mouseenter事件數(shù)量可能非常巨大,并導致嚴重的性能問題。在這種情況下,最好是監(jiān)聽mouseover事件。
結合其對稱事件mouseleave的行為,mouseenter DOM事件以與CSS :hover偽類非常相似的方式運行。
規(guī)范 | DOM L3 |
---|---|
接口 | MouseEvent |
是否冒泡 | 否 |
是否可取消 | 否 |
目標 | Element |
默認操作 | 沒有 |
屬性 | 類型 | 描述 |
---|---|---|
target (只讀) | EventTarget | 事件目標(DOM樹中最頂層的目標)。 |
type (只讀) | DOMString | 事件的類型。 |
bubbles (只讀) | Boolean | 事件是否正常冒泡 |
cancelable (只讀) | Boolean | 事件是否可以取消 |
view (只讀) | WindowProxy | document.defaultView (window 文件) |
detail (只讀) | long (float ) | 0。 |
currentTarget (只讀) | EventTarget | 附加了事件監(jiān)聽器的節(jié)??點。 |
relatedTarget (只讀) | EventTarget | 對于mouseover ,mouseout ,mouseenter 和mouseleave 事件:互補事件的目標(在mouseenter 事件的情況下為mouseleave 目標)。否則為null 。 |
screenX (只讀) | long | 全局(屏幕)坐標中鼠標指針的X坐標。 |
screenY (只讀) | long | 全局(屏幕)坐標中鼠標指針的Y坐標。 |
clientX (只讀) | long | 鼠標指針在本地(DOM內(nèi)容)坐標中的X坐標。 |
clientY (只讀) | long | 鼠標指針在本地(DOM內(nèi)容)坐標中的Y坐標。 |
button (只讀) | unsigned short | 這始終為0,因為沒有按鈕按下此事件(鼠標移動)。 |
buttons (只讀) | unsigned short | 觸發(fā)鼠標事件時按下按鈕:左按鈕= 1,右按鈕= 2,中間(滾輪)按鈕= 4,第4按鈕(通常,“瀏覽器返回”按鈕)= 8,第5按鈕(通常為“瀏覽器”轉發(fā)“按鈕”= 16。如果按下兩個或更多按鈕,則返回值的邏輯和。例如,如果按下左鍵和右鍵,則返回3(= 1 | 2)。 |
mozPressure (只讀) | float | 生成事件時施加到觸摸或制表設備的壓力量;此值介于 0.0 (最小壓力) 和 1.0 (最大壓力) 之間。 |
ctrlKey (只讀) | boolean | 如果在觸發(fā)事件時控制鍵已關閉,則為true ,否則為false 。 |
shiftKey (只讀) | boolean | 如果在事件被觸發(fā)時shift鍵已關閉,則為true ,否則為false 。 |
altKey (只讀) | boolean | 如果事件被觸發(fā)時alt鍵已關閉,則為true ,否則為false 。 |
metaKey (只讀) | boolean | 如果在觸發(fā)事件時meta鍵已關閉,則為true ,否則為false 。 |
mouseover文檔中有一個示例說明了mouseover和mouseenter之間的區(qū)別。
以下示例說明如何使用mouseover模擬mouseenter事件的事件委派原則。
<ul id="test">
<li>
<ul class="enter-sensitive">
<li>item 1-1</li>
<li>item 1-2</li>
</ul>
</li>
<li>
<ul class="enter-sensitive">
<li>item 2-1</li>
<li>item 2-2</li>
</ul>
</li>
</ul>
<script>
var delegationSelector = ".enter-sensitive";
document.getElementById("test").addEventListener("mouseover", function( event ) {
var target = event.target,
related = event.relatedTarget,
match;
// search for a parent node matching the delegation selector
while ( target && target != document && !( match = matches( target, delegationSelector ) ) ) {
target = target.parentNode;
}
// exit if no matching node has been found
if ( !match ) { return; }
// loop through the parent of the related target to make sure that it's not a child of the target
while ( related && related != target && related != document ) {
related = related.parentNode;
}
// exit if this is the case
if ( related == target ) { return; }
// the "delegated mouseenter" handler can now be executed
// change the color of the text
target.style.color = "orange";
// reset the color after a small amount of time
setTimeout(function() {
target.style.color = "";
}, 500);
}, false);
// function used to check if a DOM element matches a given selector
// the following code can be replaced by this IE8 compatible function: https://gist.github.com/2851541
function matches( elem, selector ){
// the matchesSelector is prefixed in most (if not all) browsers
return elem.matchesSelector( selector );
};
</script>
我們將兼容性數(shù)據(jù)轉換為機器可讀的JSON格式。
Chrome | Edge | Firefox(Gecko) | Internet Explorer | Opera | Safari | |
---|---|---|---|---|---|---|
基本支持 | 支持:30 [1] | 支持 | 支持:10 [2] | 支持:5.5 | 不支持:15.0 、17.0 | 支持:7 [3] |
在禁用的表單元素上 | 不支持 | 不支持 | 支持:44.0[4] | 不支持 | 沒有支持 | ? |
Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | |
---|---|---|---|---|---|---|---|
基本支持 | ? | ? | 支持 | ? | ? | ? | ? |
在禁用的表單元素上 | ? | ? | 不支持 | ? | ? | ? | ? |
注釋:
[1]在錯誤236215中實現(xiàn)。
[2]在錯誤432698中實現(xiàn)。
[3]Safari 7在許多不允許的情況下觸發(fā)事件,使整個事件無用。有關錯誤的描述,請參閱錯誤470258(它也存在于舊的Chrome版本中)。Safari 8具有正確的行為。
[4]在錯誤218093中實現(xiàn)。
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: