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>

  • 相关阅读:
    如何结合后台数据库 启动vue项目
    nodejs卸载安装
    mysql安装过程
    VUE-cli脚手架
    css伪类
    element中遇到的表格问题总结
    小程序折叠面板的功能
    vue学习中遇到的onchange、push、splice、forEach方法使用
    vscode好用的扩展及常用的快捷键
    Flutter之SliverAppBar
  • 原文地址:https://www.cnblogs.com/gyjWEB/p/3958621.html
Copyright © 2011-2022 走看看