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

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

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

 

posted @ 2021-08-11 10:48  彼岸舞  阅读(441)  评论(0)  编辑  收藏  举报