<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> let enter; enter = function (event){ $("#itemClose").css("display","inline"); return false; } function leave(event){ $("#itemClose").css("display","none"); return false; } function atr (){ console.log(this) } </script> </head> <body> <div style="" > <input id="mou" onmouseenter="enter(event)" onmouseleave="leave(event)" value="111" /> <i id="itemClose" style="position:absolute;top:10px;left:160px;display:none;20px;height:20px;background-color:yellow;" onclick="atr()">1</i> </div> </body> </html>
这样会导致input标签上的i标签一直闪动
本来以为是 事件冒泡的原因,但是阻止了事件的冒泡还是一直闪动,后来发现其实是应为i标签和input标签的层级原因应为是平级所以鼠标悬浮到i上会认为是离开了
修改代码,将事件放入到外层的div即可
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> let enter; enter = function (event){ $("#itemClose").css("display","inline"); return false; } function leave(event){ $("#itemClose").css("display","none"); return false; } function atr (){ console.log(this) } </script> </head> <body> <div style="" onmouseenter="enter(event)" onmouseleave="leave(event)"> <input id="mou" value="111" /> <i id="itemClose" style="position:absolute;top:10px;left:160px;display:none;20px;height:20px;background-color:yellow;" onclick="atr()">1</i> </div> </body> </html>
作者：彼岸舞
时间：2021 811
内容关于：工作中用到的小技术
本文属于作者原创,未经允许,禁止转发