滑鼠懸浮事件與閃爍問題的處理
阿新 • • 發佈：2019-01-04
使用mouseenter/mouseleave代替mouseover/mouseout
前組事件不繫結子元素；後者反之
推薦使用hover()+callback()
純css偽類也能實現懸浮事件
Demo:<style> html{ font-size: 12px; } div,span{ border: 1px #ccc solid; } div{ width: 50px; height: 50px; display: none; } button:hover+div{ display: block; } </style> <body> <button>click</button> <div><span>子元素</span><br>div元素</div> </div> <script> $("button").mouseover(function(){ $("div").css({ "display":"block", }); console.log("mouseover"); }); $("div").mouseout(function(){ $("div").css({ "display":"none", }); console.log("mouseout"); }); </script> </body>
滑鼠指向這個按鈕顯示div;
滑鼠指向子元素時不呼叫mouseout;
滑鼠離開子元素時，mouseout 呼叫兩次；
滑鼠先進入父物件再進入子物件，呼叫兩次
得出結論：
mouseover 事件會繫結本身以及子物件，當滑鼠進入span時，先是div相應了事件，然後div消失引起span的mouseout，第二次相應了事件。
當進入的位置位於span中，離開span會響應一次事件，導致div消失進而引起第二次響應
參考：
W3School線上測試工具 V2 http://www.w3school.com.cn/tiy/t.asp?f=jquery_event_mouseenter_mouseover
W3School線上測試工具 V2 http://www.w3school.com.cn/tiy/t.asp?f=jquery_event_mouseleave_mouseout