js 阻止事件冒泡
在 JavaScript 中，事件冒泡是指事件从最具体的元素（事件目标）开始触发，然后向上传播到较为不具体的元素（例如：从按钮到 document）。
基础概念： 事件冒泡是 DOM 标准中的一种事件传播机制。
优势：
- 可以在父元素上统一处理多个子元素的事件，减少事件处理函数的数量，提高性能。
- 便于实现一些通用的交互效果。
应用场景：
- 点击一个按钮，阻止事件冒泡以避免触发其父元素的点击事件。
阻止事件冒泡的方法：
在事件处理函数中，可以使用 event.stopPropagation() 方法来阻止事件冒泡。
以下是一个示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>阻止事件冒泡示例</title>
</head>
<body>
<div id="parent" style="width: 200px; height: 200px; background-color: lightblue;">
父元素
<button id="child">子按钮</button>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', function () {
console.log('父元素被点击');
});
child.addEventListener('click', function (event) {
event.stopPropagation();
console.log('子按钮被点击');
});
</script>
</body>
</html>在上述示例中，当点击子按钮时，只会输出 "子按钮被点击"，而不会输出 "父元素被点击"，因为通过 event.stopPropagation() 阻止了事件冒泡。
相关·内容
我正在使用bonsai.js库，并在网站的英雄部分添加了一个很大的stage。然而，在Chrome中，当鼠标在stage上(在标语和蓝色按钮轮廓之间)时，我无法向下或向上滚动。
浏览 4提问于2013-04-26得票数 0
6回答
假设我有： <div id="inner"></div>当我单击外部或内部div时，将执行thingsHappen()。这是显而易见的。$("#inner").click(function() {});
当我单击inner时，thingsHappen()和doThings()都
浏览 3提问于2012-04-22得票数 1
回答已采纳
当将锤子事件绑定到元素时，该事件也由其子元素触发。使用stopPropagation阻止事件冒泡似乎不起作用。HTML： <div id="child"></div>JS：
var hammertime = new Hammer(document.getElementById
浏览 4提问于2014-12-20得票数 1
我在JS中寻找一种方法来阻止单击事件在单击父元素时从DOM继续到嵌套的子元素(捕获阶段)。是否存在用于此的原生JS函数？
浏览 3提问于2015-03-11得票数 0
1回答
当事件被触发时，现代浏览器运行两个不同的阶段：
因此，我想知道是否正确地说捕获和冒泡阶段到达event.target节点。
浏览 4提问于2021-07-07得票数 1
回答已采纳
我不希望对象上的鼠标事件被传递到画布上。stopPropagation和/或stopImmediatePropagation不会停止这些事件。
我是不是用错了这些方法？
浏览 0提问于2018-09-17得票数 6
回答已采纳
我绑定到一个链接(通过使用jQuery的.live()函数) click事件，然后手动添加一个纯JS和超文本标记语言(如<a href="".... onclick="some action">)的onclick事件处理程序。我想阻止live方法的事件冒泡，但我不知道如何阻止。也许e.stopPropagation()在这种情况下是有帮助的，但是用onclick添加的事件处理程序是用纯JS</
浏览 3提问于2011-08-17得票数 12
回答已采纳
这是预期的，因为单击事件气泡一直到父容器，即body。现在开始我的问题为什么将return false添加到我的live.click中并不能阻止单击事件的冒泡。从示例中，live.click冒泡并触发警报框。我以为文件上说，返回假将阻止实时事件的泡沫。2)
现在，我将body中的单击事件更改为live.click，它修复了问题-> --单击事件没有冒泡(因此没有显示警告框)。为什么live.clic
浏览 5提问于2011-05-03得票数 8
回答已采纳
我的页面上有一个带有onclick="toggledropdown()“的div (id="menu")。这个div既有文本，也有img子元素。当单击除图像之外的任何内容时，切换代码都能正常工作。但是，当单击图像时，div会向下滑动，然后再次返回。function toggledropdown() if ($("#dropdown").is(":hidden")) $("#dropdown").slideDown(400); els
浏览 1提问于2012-09-18得票数 0
回答已采纳
2回答
尝试了用HashChanger，但它只是激发'hashChange‘事件，没有办法阻止它冒泡。答案可以在JS-信号库中，但是它对于用户创建的SAP组件来说是不可用的。
浏览 4提问于2015-03-20得票数 1
回答已采纳
1回答
当单击子事件时，我希望防止父事件发生在父事件上。请注意，我没有访问父事件代码的权限。我试过在按钮上做e.preventDefault()，但是没有用。有什么方法可以忽略所有的父事件时，它的东西被点击？ margin: auto;<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js</em
浏览 2提问于2015-02-25得票数 0
回答已采纳
1回答
我添加了一个鼠标事件侦听器来阻止单击： e.stopPropagation();但这甚至阻止了铬级别的点击。如何允许冒泡直到browser元素。我不希望点击进入contentWindow。我知道我可以将一组事件侦听器添加到所有加载的文档中，但我想通过上面的一个侦听器来完成它，希望了解一些有关冒泡</e
浏览 1提问于2014-07-18得票数 0
回答已采纳
我真的很感激任何帮助，因为我很难应付一般的React import React from "react"; useTable,
useFlexLayout
浏览 3提问于2020-08-30得票数 2
回答已采纳
2回答
我想要完成的：我在DOM中有一个元素，我想要响应、滑动、和单击事件。但是，当触发swipe.end事件时，也会触发单击事件。我试图通过调用stopPropagation并在事件上直接调用event.stop来阻止事件的冒泡(在本例中假设事件正在冒泡)，但没有效果。您可以在下面看到一个代码片段，或者查看一个。<div id='testSwipe'>Swipe Me</div>
<e
浏览 3提问于2012-07-01得票数 0
4回答
something }我该如何阻止导致此方法被调用的事件从changeTextArea冒泡到包含changeTextArea的面板/小部件/组合/中。简而言之，我如何阻止它进一步冒泡。任何帮助都将不胜感激(尤其是代码示例)。
浏览 0提问于2008-10-18得票数 5
回答已采纳
2回答
$(function() { source: "ajax_villes.php", minLength: 1, $('#js_searchform').prepend('<input type= currentDepartement) {
浏览 2提问于2015-01-09得票数 1
回答已采纳
2回答
Vue.js改性剂链
、、、、
我是Vue.js的新手。我在看医生，一点也听不懂.
order在使用修饰符时很重要，因为相关代码是按照相同的顺序生成的。因此，使用@click.prevent.self将阻止所有单击，而@click.self.prevent只会阻止对元素本身的单击。"https://stackoverflow.com">@click.prevent.self="fn" or @click.self.prevent="fn" difference</a&
浏览 11提问于2017-09-23得票数 0
我正在尝试阻止链接和项目上的多次点击，这会导致问题。或者，我是否必须维护一个名为_isProcessing的全局变量，并为每个事件处理程序将其设置为true？谢谢
编辑：(澄清)谢谢你的回答，我的问题不是阻止事件的冒泡，而是阻止多个并发点击。
浏览 1提问于2010-08-13得票数 30
回答已采纳
1回答
我想隐藏所有div的隐藏，当点击页面的主体时，而不是div。我的div是 <div id="settings1" class="settingsBoxExpandItem" style="padding:3px;border-bottom:1px solid #dddddd">My Account</div>
<div id="settings2
浏览 0提问于2012-02-22得票数 3
回答已采纳
8回答
输入触发两次按键事件
、、、
这个问题(大部分)以前已经被问过/回答过了，但我已经尝试了三种方法来阻止事件冒泡，但都没有奏效：e.stopPropagation();</div>
和
浏览 5提问于2011-11-03得票数 26
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
