jQuery因mouseover,mouseout冒泡产生的闪烁问题

作者：王炜
日期：2015年01月16日

由于浏览器的冒泡行为。造成如果在一个DIV元素上同时定义了mouseover,mouseout的时候，当鼠标移动到DIV中的child子元素的时候，就会同时执行了两个操作mouseover和mouseout。

解决方案：阻止冒泡行为，当执行mouseover的时候不触发mouseout的操作。

 

方法1：
延迟执行（setTimeout）、取消延迟（clearTimeout），就是当mouseout的时候延迟执行，而在mouseover的时候取消延迟执行。当鼠标在DIV上边移动的时候因为延迟的执行所以mouseout一直都不会被触发。

  1. $('div').mouseout(function(){
  2.      clearTimeout(t);
  3.       t=setTimeout(zoomIn,400);
  4.     }).mouseover(function(){
  5.    if(t!=null)clearTimeout(t);
  6.    t=null;
  7.   }
  8. );

 

方法2：jquery(需要版本号大于1.2.2)
mouseenter和mouseleave事件IE特有的函数，使用jquery就很好的解决了兼容问题。函数的原理当第一次鼠标进入节点区域时触发，以后在节点区域内(子节点间)移动时不触发。

  1. $('div').bind("mouseenter",function(){
  2. // do something on mouseenter
  3. });
  4. $('div').bind("mouseleave",function(){
  5. // do something on mouseleaver
  6. });

 

jquery版本 >1.4简化写法：

  1. $('div').bind({
  2. mouseenter:function(){
  3. // do something on mouseenter
  4. },
  5. mouseleaver:function(){
  6. // do something on mouseleaver
  7. }
  8. })

 

欢迎转载，转载请保留链接: https://www.phpzu.com/article/2015/01/16/729.html

留言（1条）

  1. 沙发
    小小今 [回复]
    Post:2015-07-02 下午3:28

    棒棒哒

发表评论

*

code

苏ICP备18015036号-1 版权所有 王炜

1