zoukankan      html  css  js  c++  java
  • js阻止冒泡及jquery阻止事件冒泡示例介绍

    js阻止冒泡
    在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容。

    复制代码 代码如下:

    function stopPro(evt){
    var e = evt || window.event;
    //returnValue如果设置了该属性,它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle,
    //可以取消发生事件的源元素的默认动作。
    //window.event?e.returnValue = false:e.preventDefault();
    window.event?e.cancelBubble=true:e.stopPropagation();
    }


    或者:

    复制代码 代码如下:

    function cancelBubble(e) {
    var evt = e ? e : window.event;
    if (evt.stopPropagation) {
    //W3C
    evt.stopPropagation();
    }
    else {
    //IE
    evt.cancelBubble = true;
    }

     
    JQuery 提供了两种方式来阻止事件冒泡。
    方式一:event.stopPropagation();

    复制代码 代码如下:

    $("#div1").mousedown(function(event){
    event.stopPropagation();
    });


    方式二:return false;

    复制代码 代码如下:

    $("#div1").mousedown(function(event){
    return false;
    });


    Jquery阻止默认动作即通知浏览器不要执行与事件关联的默认动作。
    例如:

    复制代码 代码如下:

    $("a").click(function(event){
    event.preventDefault(); //阻止默认动作即该链接不会跳转。
    alert(4);//但是这个还会弹出
    event.stopPropagation();//阻止冒泡事件,上级的单击事件不会被调用
    return false;//不仅阻止了事件往上冒泡,而且阻止了事件本身
    });


    但是这两种方式是有区别的。return false 不仅阻止了事件往上冒泡,而且阻止了事件本身。event.stopPropagation() 则只阻止事件往上冒泡,不阻止事件本身。
    场景应用:Google 和 百度的联想框,当弹出下拉列表,用户在下拉列表区域按下鼠标时需要让光标仍然保持在文本输入框。
    Jquery案例:

    复制代码 代码如下:

    <script src="js/jquery-1.4.3.js"></script>
    <script type="text/javascript">
    $(function(){
    $("#aa").click(function(event){
    alert("aa");
    event.preventDefault();
    event.stopPropagation();
    alert(3);
    });
    $("#ee").click(function(){
    alert("ee");
    });
    $("a").click(function(event){
    event.preventDefault();
    alert(4);
    event.stopPropagation();
    return false;
    });
    });
    </script>
    </head>
    <body>
    <div id="ee">
    aaaaaaa
    <input id="aa" type="button" value="test" />
    <a href="http://baidu.com">baidu.com</a>
    </div>
    </body>


    js案例:

    复制代码 代码如下:


    function tt(){
    alert("div");
    }
    function ttt(){
    var e = arguments.callee.caller.arguments[0] || window.event;
    window.event?e.returnValue = false:e.preventDefault();
    alert(3);
    window.event?e.cancelBubble:e.stopPropagation();
    alert(4);
    }
    </script>
    </head>
    <body>
    <div onclick = "tt();">
    ccccc
    <a href="http://baidu.com" onclick="ttt();">baidu.com</a>
    </div>

  • 相关阅读:
    Blank page instead of the SharePoint Central Administration site
    BizTalk 2010 BAM Configure
    Use ODBA with Visio 2007
    Handling SOAP Exceptions in BizTalk Orchestrations
    BizTalk与WebMethods之间的EDI交换
    Append messages in BizTalk
    FTP protocol commands
    Using Dynamic Maps in BizTalk(From CodeProject)
    Synchronous To Asynchronous Flows Without An Orchestration的简单实现
    WSE3 and "Action for ultimate recipient is required but not present in the message."
  • 原文地址:https://www.cnblogs.com/gyjWEB/p/3958621.html
Copyright © 2011-2022 走看看