zoukankan      html  css  js  c++  java
  • jquery mouseout mouseover 多次执行

    用jquery,mouseout,mouseover,随着鼠标移动,事件被触发了多次(冒泡),换成js onmouseover,onmouseout也是一样。最终的解决办法是,用jquery,mouseleave代替mouseout;mouseenter代替mouseover。

    mouseleave,mouseenter鼠标离开,进入最外层标签时触发事件。

    mouseout,mouseover鼠标离开,进入里面标签时触发事件。

    1,单个内部元素,无区别

    1. <div id="test2" >  
    2. <img src='test1.jpg'>  
    3. </div>  
    4.   
    5. $("#test2").mouseleave(function(){  
    6.  console.log('out');  
    7.  }).mouseenter(function(){  
    8.  console.log('in');  
    9.  });  
    10.   
    11.  $("#test2").mouseout(function(){  
    12.  console.log('out');  
    13.  }).mouseover(function(){  
    14.  console.log('in');  
    15.  });  

    上面二代码JS代码分别执行,执行的结果是一样的。mouseover,onmouseover,mouseenter一样,mouseout,onmouseout,mouseleave一样

    2,多个内部元素,mouseleave,mouseenter只会执行一次

    1. <div id="test2" >  
    2.  <ul>  
    3.  <li>test</li>  
    4.  <li>test1</li>  
    5.  <li>test2</li>  
    6.  <li>test3</li>  
    7.  <li>test4</li>  
    8.  </ul>  
    9. </div>  

    如果将html代码换成ul这种形势,当鼠标进入,离开div时,mouseleave,mouseenter只会执行一次,而其他的,随着鼠标在ul的每个li之间进行滑动时,都会被执行。

  • 相关阅读:
    python错误信息 object is not subscriptable 的原因
    python join函数
    string的部分总结
    第k个非立方数(忘记哪里的题了)
    pandas 学习
    数学建模中 时间序列典型分解模型 matlab实现
    matlab三维画图学习 三次插值
    原型
    JavaScript
    js数组去重(多种写法)
  • 原文地址:https://www.cnblogs.com/huangshikun/p/6649095.html
Copyright © 2011-2022 走看看