阻止冒泡和取消默认行为(JS)

最新推荐文章于 2025-06-14 21:18:41 发布

题词策

最新推荐文章于 2025-06-14 21:18:41 发布

阅读量390

点赞数 3

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/Elementsboy/article/details/106606646

js 专栏收录该内容

20 篇文章

订阅专栏

本文深入解析JavaScript事件处理机制，包括冒泡与捕获的区别，如何使用stopPropagation()和preventDefault()来控制事件传播与取消默认行为，附带示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

冒泡和捕获是事件的两种行为

使用 stopPropagation() 起到阻止捕获和冒泡阶段中当前事件的进一步传播。
使用 preventDefault() 可以取消默认事件。浏览器通过HTML标签或DOM元素提供的一些功能性的默认行为。

- 比如：在a标签href属性上的跳转，form表单里点击提交按钮时网页会产生提交行为并刷新网页等等。

我们可以通过js取消或更改这些默认事件。

防止冒泡和捕获：

w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true

stopPropagation也是事件对象(Event)的一个方法，作用是阻止目标元素的冒泡事件，但是会不阻止默认行为。什么是冒泡事件？如在一个按钮是绑定一个”click”事件，那么”click”事件会依次在它的父级元素中被触发。stopPropagation就是阻止目标元素的事件冒泡到父级元素。

示例：

<body>
    <div class="box">
        <div class="inner">1</div>
    </div>
    <a href="www.baidu.com" id="href">百度</a>
    <script>
        var box = document.querySelector(".box");
        var inner = document.querySelector(".inner");
        var href = document.querySelector("#href");

        href.onclick = function(e){
            e.preventDefault();//阻止默认行为
        }

        href.ondragstart = function(e){
            e.preventDefault();//阻止默认行为
        }


        inner.onclick = function(event){
            //目标元素
            event.stopPropagation(); //阻止事件冒泡
            alert("inner");
        }

        box.onclick = function(){
            alert("box");
        }
    </script>
</body>

如上例子我们单击test时，会依次触发alert(“inner”)，alert(“box”) 这就是事件冒泡。

阻止冒泡

window.event ? window.event.cancelBubble = true : e.stopPropagation();

取消默认事件

w3c的方法是 e.preventDefault()，IE则是使用e.returnValue = false;

preventDefault它是事件对象(Event)的一个方法，作用是取消一个目标元素的默认行为。既然是说默认行为，当然是元素必须有默认行为才能被取消，如果元素本身就没有默认行为，调用当然就无效了。什么元素有默认行为呢？如链接 <a>，提交按钮 <input type=”submit”/> 等。当Event 对象的 cancelable为false时，表示没有默认行为，这时即使有默认行为，调用preventDefault也是不会起作用的。

我们都知道，链接 <a> 标签的默认动作就是跳转到指定页面，上面就以它为例，阻止它的跳转：

var href = document.querySelector("#href");
 href.onclick = function(e){
    e.preventDefault();//阻止默认行为
}