zoukankan      html  css  js  c++  java
  • jQuery因mouseover,mouseout冒泡产生的闪烁问题

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

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

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

    $('div').mouseout(function(){
         clearTimeout(t);
          t=setTimeout(zoomIn,400);
        }).mouseover(function(){
       if(t!=null)clearTimeout(t);
       t=null;
      }
    ); 
    

      

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

    $('div').mouseout(function(){
         clearTimeout(t);
          t=setTimeout(zoomIn,400);
        }).mouseover(function(){
       if(t!=null)clearTimeout(t);
       t=null;
      }
    ); 
    

      

    jquery版本 >1.4简化写法:

    $('div').mouseout(function(){
         clearTimeout(t);
          t=setTimeout(zoomIn,400);
        }).mouseover(function(){
       if(t!=null)clearTimeout(t);
       t=null;
      }
    ); 
    

      

  • 相关阅读:
    redis使用基础(一) ——Redis基本概述与安装配置
    Linux学习闲谈(三) ——SVN用法及切版本与合版本
    Linux学习闲谈(二) ——SVN版本控制拾遗
    Linux学习闲谈(一)——Shell基本操作与命令
    linux1
    git命令
    ubuntu
    laradock
    实用工具
    grumphp在docker里问题
  • 原文地址:https://www.cnblogs.com/as3lib/p/6580013.html
Copyright © 2011-2022 走看看