javascript - 關(guān)于mouseenter的問(wèn)題
問(wèn)題描述
<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.cgvv.com.cn/wenda/jquery/jquery-3.2.1.js'></script></head><body> <p>只有在鼠標(biāo)指針穿過(guò)被選元素時(shí)，才會(huì)觸發(fā) mouseenter 事件。</p> <p class='enter'><h2 >被觸發(fā)的 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>
當(dāng)我用絕對(duì)定位把子元素移到下面，這時(shí)穿過(guò)子元素也會(huì)觸發(fā)事件，這是怎么回事？
問(wèn)題解答
回答1：absolute positioning 只是將元素抽離了 normal flow ，并沒(méi)有改變 document tree 的結(jié)構(gòu)，所以子元素依然算是在父元素里面。
解決方法可以是判斷 event.target 是不是子元素，或者改為給兩者綁定 mouseover 然后在子元素里 stopPropagation 。
回答2：根據(jù)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.
翻譯一下就是：
當(dāng)指針一類的東西移到某個(gè)元素的邊界上，或者它的某個(gè)后代元素的邊界上，就必須觸發(fā)mouseenter事件。而當(dāng)指針從某個(gè)元素里，移到它的某個(gè)后代元素的邊界上時(shí)，則不可觸發(fā)mouseenter事件。
所以對(duì)于你的問(wèn)題，回答就是，移到后代上也會(huì)觸發(fā)mouseenter是人家規(guī)定了的
相關(guān)文章：
1. MySQL主鍵沖突時(shí)的更新操作和替換操作在功能上有什么差別(如圖)2. 關(guān)于mysql聯(lián)合查詢一對(duì)多的顯示結(jié)果問(wèn)題3. python - scrapy url去重4. mysql在限制條件下篩選某列數(shù)據(jù)相同的值5. 數(shù)據(jù)庫(kù) - Mysql的存儲(chǔ)過(guò)程真的是個(gè)坑！求助下面的存儲(chǔ)過(guò)程哪里錯(cuò)啦，實(shí)在是找不到哪里的問(wèn)題了。6. 小白學(xué)python的問(wèn)題 關(guān)于%d和%s的區(qū)別7. python執(zhí)行cmd命令，怎么讓他執(zhí)行類似Ctrl+C效果將其結(jié)束命令？8. 實(shí)現(xiàn)bing搜索工具urlAPI提交9. python - Django有哪些成功項(xiàng)目？10. Python從URL中提取域名
網(wǎng)公網(wǎng)安備