JS原生onmouseenter onmouseleave 悬浮事件 一直闪动 问题解决

<!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

内容关于:工作中用到的小技术

本文属于作者原创,未经允许,禁止转发

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页

打赏作者

十六夜之彼岸舞

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值