zoukankan html css js c++ java

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

作者：彼岸舞

时间：2021811

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

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

查看全文

相关阅读:
POST请求
 怎样在ios开发中设置tableview的cell颜色
 error LNK2005 已经在***.obj中定义
 IOS开发之UIView的基本使用
 [置顶] 浅谈Android的资源编译过程
 IOS开发之UIView总结
 鉴别不使用的索引
 浅谈Jquery的使用下篇
 Go如何使用实现继承的组合
 做一个小淘气轮廓--文章和论文专辑

原文地址：https://www.cnblogs.com/flower-dance/p/15127218.html

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

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