<!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;width: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;width:20px;height:20px;background-color:yellow;" onclick="atr()">1</i>
</div>
</body>
</html>
作者:彼岸舞
时间:2021\08\11
内容关于:工作中用到的小技术
本文属于作者原创,未经允许,禁止转发