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
Copyright © 2011-2022 走看看