(O)阻止默认事件和阻止冒泡的应用场景

最新推荐文章于 2022-11-16 22:06:03 发布

weixin_30530339

最新推荐文章于 2022-11-16 22:06:03 发布

阅读量303

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jacksplwxy/p/6651964.html

本文介绍了JavaScript中处理事件的两种关键技巧：阻止默认行为与阻止事件冒泡。通过具体实例展示了如何使用preventDefault()来阻止a标签的跳转行为，以及如何运用stopPropagation()避免点击子元素时触发父元素的事件。

场景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

转载于:https://www.cnblogs.com/jacksplwxy/p/6651964.html