JavaScript停止冒泡事件和阻止默认事件

最新推荐文章于 2023-05-06 14:24:39 发布

旗smile

最新推荐文章于 2023-05-06 14:24:39 发布

阅读量2.5k

点赞数 1

分类专栏： javascript 文章标签： javascript 事件冒泡-阻止默认事

本文链接：https://blog.csdn.net/u014346301/article/details/52128197

版权

javascript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

事件冒泡和事件捕获

事件冒泡： 当事件在某一个DOM元素上触发时，先触发最具体的元素，然后依次向上触发父级元素的事件。例如一个div里面嵌套一个p元素，p元素里面嵌套一个button，当点击button时，会依次触发button、p、div上的点击事件。

事件捕获： 当触发某个DOM元素时，会先出发根元素的事件，然后按照该DOM元素的祖先次序依次触发事件，最后再触发该元素的事件。顺序与事件冒泡的执行顺序相反。

事件冒泡Demo：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>冒泡事件</title>
<style>
.parent{
    background:rgba(244,130,132,1.00);
    border:1px solid rgba(201,197,197,1.00);
    width:200px;
    height:200px;
}
.f{
    background:rgba(113,229,239,1.00);
    border:1px solid rgba(0,0,0,1.00);  
    width:100px;
    height:100px;
}

</style>
</head>

<body>
<div class="parent" onClick="parent()">
    <div class="f" onClick="cl()">
        <button onClick="bu()">冒泡</button>
    </div>
</div>
<script>
function bu(){
    console.log("按钮事件");
}
function cl(){
    console.log("子元素事件");
}
function parent(){
    console.log("父元素事件");
}
</script>
</body>
</html>

运行代码如下：
冒泡事件

当点击图中的按钮时，结果如下：
输出结果

以上就是一个冒泡事件，会一层一层的向上触发祖先元素的事件。

然后我们来阻止冒泡事件的发生，W3C提供了阻止冒泡事件的方法e.stopPropagation(),在IE中则需要将e.cancelBubble设置为true。

代码如下：

function stopBubble(e){
    if(e && e.stopPropagation){
        e.stopPropagation();
    }else{
        window.event.cancelBubble=true;
    }
}

默认事件： 一些标签会有一些默认事件，比如点击a标签以后会跳转至href链接的页面，现在我们想要阻止默认事件。W3C提供的方法为e.preventDefault(),在IE中要将e.returnValue设置为false，最后都要返回false。
阻止默认事件：

function stopDefault(e){
    if(e && e.preventDefault){
        e.preventDefault();
    }else{
        window.event.returnValue = false;
    }
    return false;
}

旗smile

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript停止冒泡事件和阻止默认事件

事件冒泡和事件捕获事件冒泡：当事件在某一个DOM元素上触发时，先触发最具体的元素，然后依次向上触发父级元素的事件。例如一个div里面嵌套一个p元素，p元素里面嵌套一个button，当点击button时，会依次触发button、p、div上的点击事件。事件捕获：当触发某个DOM元素时，会先出发根元素的事件，然后按照该DOM元素的祖先次序依次触发事件，最后再触发该元素的事件。顺序与事件冒泡的执行顺序
复制链接

扫一扫

专栏目录