zoukankan      html  css  js  c++  java
  • (O)阻止默认事件和阻止冒泡的应用场景

    场景1:阻止默认事件
       比如这样的一个需求 点击取消a标签按钮的时候会触发一些js动作,但是不能让这个a标签产生跳转行为,
    所以需要在点击取消的时候 阻止冒泡,防止其跳转。

    <a id='cancelBtn' href="https://www.baidu.com">取消按钮</a>
    <script>
        document.getElementById("cancelBtn").addEventListener("click",function(e){
        e.preventDefault();
        alert("点击了");
        });
    </script>

    场景2:阻止冒泡
       比如最简单的弹出层:当点击提交按钮的时候提交信息,当点击弹出层周边的空白区域的时候取消遮罩。但
    是因为存在事件冒泡机制,点击提交按钮时,点击事件会冒泡到div弹出层,以致遮罩层自动取消,这时我们就
    应当阻止事件冒泡了。

    <div id="dialog">
        <span id="submit">确定</span>
    </div>
    <script>
        $("#submit").on("click",function(e){
            e.stopPropagation(); //阻止冒泡,防止冒泡到document层
            ...
        });
        $(document).on("click",function(e){ 
            if($(e.target).closest("#dialog").length == 0){
                $("#dialog").hide(); 
            }
        })
    </script>

    小结:
      1.阻止事件冒泡,但不阻止默认行为。如 stopPropagation 或 cancelBubble等。
      2.阻止默认行为,但不阻止事件冒泡。如 preventDefault 方法。
      3.同时阻止事件冒泡和默认行为。直接 return false 即可。

    转载请注明文章出处:http://www.cnblogs.com/jacksplwxy/p/6651964.html
  • 相关阅读:
    shell脚本进阶
    sort与uniq命令
    sed命令
    DNS与CDN
    nginx
    Docker Private Registry
    docker存储卷
    docker容器网络配置
    docker容器网络
    docker容器虚拟化
  • 原文地址:https://www.cnblogs.com/jacksplwxy/p/6651964.html
Copyright © 2011-2022 走看看