zoukankan      html  css  js  c++  java
  • 阻止浏览器事件传递

    阻止jQuery事件冒泡

    jQuery对DOM的事件触发具有冒泡特性。有时利用这一特性可以减少重复代码,但有时候我们又不希望事件冒泡。这个时候就要阻止 jQuery.Event冒泡。 

    在jQuery.Event 的文档 中的开头得知,jQuery.Event对象是符合W3C标准的一个事件对象,同时jQuery.Event免去了检查兼容IE的步骤。 

    jQuery.Event提供了一个非常简单的方法来阻止事件冒泡:event.stopPropagation(); 

    $("p").click(function(event){   
        event.stopPropagation(); // do something   
    
    })  

    但是这个方法对使用live 绑定的事件没有作用,需要一个更简单的方法阻止事件冒泡:return false; 

    $("p").live("click", function(){   
       $(this).after("Another paragraph!");   
    
       return false;   
    
    });  
    另外 JavaScript 阻止冒泡 

     阻止冒泡事件的方法有两种,第一种是IE的方法,第二种是DOM方法,至于为什么要分为两种方法去讨论之,这里就不做讨论了,总之是浏览器一些蹩脚的问题,好了废话不说了,直接贴代码了: 

    Js代码
    //阻止冒泡事件   
    
     function stopBubble(e) {   
    
       if (e && e.stopPropagation) {//非IE   
    
            e.stopPropagation();    
    
         }    
    
         else {//IE    
    
             window.event.cancelBubble = true;   
    
         }   
    
     }

       举个例子:就是谷歌首页的更多选项吧,不知道的可以去看看http://www.google.com/ 。
    这里要应用两个点击事件,一个是div.onclick,另一个就是document.onclick,那么问题就出现了,在调用 div.onclick的时候,由于冒泡事件的存在,会自动的调用document.onclick,由于冒泡的顺序是从里向外的

    (div->body->document->html)所以div.onclick事件就会被覆盖掉,也就不会执行了,解决的方案其实也是很简单的哦,就是在执行div.onclick的时候阻止冒泡事件就好了,那怎么阻止呢,就调用上面的函数就ok了!哈哈!
    ps:在介绍一下阻止浏览器默认行为的方法,大同小异,这里就不再赘述了。

    Js代码
    function stopDefault(e) {    
    
         //阻止默认浏览器动作(W3C)    
    
         if (e && e.preventDefault)    
    
             e.preventDefault();    
    
         //IE中阻止函数器默认动作的方式    
    
         else   
    
             window.event.returnValue = false;    
    
         return false;    
    
     }  
  • 相关阅读:
    ECharts之柱状图 饼状图 折线图
    Vue自定义指令(directive)
    HDU 1231 最大连续子序列
    POJ 2533 Longest Ordered Subsequence
    HDU 1163 Eddy's digital Roots
    HDU 2317 Nasty Hacks
    HDU 2571 命运
    HDU 4224 Enumeration?
    HDU 1257 最少拦截系统
    HDU 2740 Root of the Problem
  • 原文地址:https://www.cnblogs.com/shaohz2014/p/3848330.html
Copyright © 2011-2022 走看看