javascript - 關于mouseenter的問題
問題描述
<head><style> .enter h2{border:1px solid;background: white;position: absolute;top: 200px; } .enter{ border:1px solid; background: #eee; width: 500px; height: 100px; }</style><script type='text/javascript' src='http://m.piao2010.com/wenda/jquery/jquery-3.2.1.js'></script></head><body> <p>只有在鼠標指針穿過被選元素時，才會觸發 mouseenter 事件。</p> <p class='enter'><h2 >被觸發的 Mouseenter 事件：<span></span></h2> </p><script type='text/javascript'> x=0; y=0; $(document).ready(function(){ $('p.enter').mouseenter(function(){$('.enter span').text(y+=1); }); });</script></body>
當我用絕對定位把子元素移到下面，這時穿過子元素也會觸發事件，這是怎么回事？
問題解答
回答1：absolute positioning 只是將元素抽離了 normal flow ，并沒有改變 document tree 的結構，所以子元素依然算是在父元素里面。
解決方法可以是判斷 event.target 是不是子元素，或者改為給兩者綁定 mouseover 然后在子元素里 stopPropagation 。
回答2：根據https://www.w3.org/TR/uievent...
A user agent MUST dispatch this event when a pointing device is moved onto the boundaries of an element or one of its descendent elements. This event type is similar to mouseover, but differs in that it does not bubble, and MUST NOT be dispatched when the pointer device moves from an element onto the boundaries of one of its descendent elements.
翻譯一下就是：
當指針一類的東西移到某個元素的邊界上，或者它的某個后代元素的邊界上，就必須觸發mouseenter事件。而當指針從某個元素里，移到它的某個后代元素的邊界上時，則不可觸發mouseenter事件。
所以對于你的問題，回答就是，移到后代上也會觸發mouseenter是人家規定了的
相關文章：
1. 如何解決docker宿主機無法訪問容器中的服務？2. 前端 - CSS3 box-shadow如何設置，或者用什么方法可以產生圖中這樣陰影的效果。3. node.js - vue-cll+sass 樣式不出來 已經npm install sass、 sass-loader了4. html - css 如何讓文字標題顯示在邊框上？5. docker 下面創建的IMAGE 他們的 ID 一樣？這個是怎么回事？？？？6. 在應用配置文件 app.php 中找不到’route_check_cache’配置項7. html按鍵開關如何提交我想需要的值到數據庫8. vim中編輯HTML文件時換行不能縮進9. HTML5中怎么判斷用戶是否正在瀏覽頁面？10. html - 微信端video標簽播放mp4視頻，安卓端提示視頻解析錯誤
網公網安備