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

最新推荐文章于 2023-04-24 21:59:02 发布

原创最新推荐文章于 2023-04-24 21:59:02 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #html #vue #javascript #css

本文讲述了如何修复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="" >
    <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

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

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