注册捕获阶段的事件监听器在冒泡之前未触发 - 为什么？
作为一名云计算领域的专家，同时也是一名开发工程师，我可以给出一些建议。
首先，注册捕获阶段的事件监听器在冒泡之前未触发可能是因为在捕获阶段还没有完全完成，或者事件监听器的注册方式不正确。
在注册捕获阶段的事件监听器时，需要确保事件监听器的注册方式正确，并且事件监听器需要与捕获阶段的事件相对应。如果事件监听器的注册方式不正确，那么事件监听器就不会在冒泡之前被触发。
另外，如果事件监听器在捕获阶段还没有完全完成就被触发，那么事件监听器也不会在冒泡之前被触发。因此，需要确保事件监听器的注册方式正确，并且事件监听器需要与捕获阶段的事件相对应。
总之，注册捕获阶段的事件监听器在冒泡之前未触发可能是因为事件监听器的注册方式不正确，或者事件监听器与捕获阶段的事件不相对应。需要仔细检查事件监听器的注册方式和事件监听器与捕获阶段的事件之间的关系，以确保事件监听器能够在冒泡之前被正确触发。
相关·内容
3回答
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>capture and bubble</title>
<style type="text/css">
#child{
background: red;
width:50px;
height:50px;
}
#father{
width:100px;
height:
浏览 1提问于2018-06-04得票数 2
回答已采纳
2回答
为什么下面的代码会显示“三”然后“二”和“一”(按这个顺序)？是和功能有关还是和桌子有关？我以为输出是1，2，3，而不是相反。
<html>
<head>
<title>WebDev Exams</title>
</head>
<body>
<div id='one'>
<table>
<tr id='two'>
浏览 4提问于2017-09-10得票数 0
回答已采纳
react audio和video标记上的每个事件都有一个副本，例如，它也具有onCanPlayThrough属性和onCanPlayThroughCapture。两者在浏览器中的行为完全相同。
我们需要使用...Capture事件而不是标准事件吗？他们的主要想法是什么？我在哪里能找到关于他们的信息。
浏览 3提问于2017-02-24得票数 11
回答已采纳
现在，这就是我理解React事件处理的方式：
发生本机事件捕获阶段。
本机事件到达目标。
本地事件回跳。
React在document层捕获它
将其放入其EventPluginHub中
React模拟SyntheticEvent的另一次完整捕获/气泡往返
React运行您在代码中构建的处理程序。
如果我对React内部元素的理解是正确的，并考虑到了HTML的：
事件对象被分派到事件目标。但在开始调度之前，必须先确定事件对象的传播路径。
是否要等到事件冒泡到document以创建其SyntheticEvent时才作出反应？如果是，为什么？在事件生命的第
浏览 0提问于2018-09-21得票数 10
回答已采纳
我试图了解true或false在Internet中添加addEventListener时所做的事情。根据微软的说法，这是useCapture。如果我添加一个事件，如：
element.addEventListener('click', function_name, true);
它似乎没有改变任何东西，侦听器仍然工作。有人能解释一下useCapture参数的用途吗？
浏览 5提问于2012-12-20得票数 3
我想知道react事件之间的区别是什么：onFocus和onFocusCapture。我在react的文档页上找不到合适的答案。
<OutlinedInput
label="price from"
onFocus={handlePriceFocus}
/>
<OutlinedInput
label="price to"
onFocusCapture={handlePriceFocus}
/>
在我的例子中，onFocus和onFocusCapture似乎具有相同的功能，因为我没有注意到在使用这两个事件时有什
浏览 4提问于2021-03-25得票数 11
回答已采纳
这段代码中每个函数末尾的0定义是什么？为什么这段代码在函数的末尾设置为0？
canvas.addEventListener('mousedown', function(e) {
model.dragging = getCircleForPosition(e.pageX, e.pageY);
}, 0);
canvas.addEventListener('mouseup', function() {
model.dragging = undefined;
}, 0);
canvas.addEventListener('mousemove'
浏览 0提问于2019-07-31得票数 0
回答已采纳
5回答
使用jQuery捕获和冒泡
、、、、
我是jQuery的新手，我正在尝试理解捕获和冒泡的概念。
我读过很多文章，但其中大多数描述了Javascript的事件传播。
让我们假设我们有以下HTML代码：
<div id="outer">
outer
<div id="inner">
inner
</div>
</div>
捕获是我们下降DOM元素的阶段，而冒泡则是上升的阶段。
在Javascript中，您可以决定遵循哪种方法(使用true或false参数)：
element.addEventListener('
浏览 5提问于2014-07-05得票数 38
回答已采纳
1回答
我有一个父<div>，内存中有一个子<div> -没有附加到当前文档。我想在子节点上触发一个CustomEvent，但是要从父节点监听该事件。这是我的代码：
var parent = document.createElement('div');
var child = document.createElement('div');
parent.appendChild(child);
parent.addEventListener('boom', function(event) {
console.log('
浏览 8提问于2015-04-11得票数 6
回答已采纳
我正在尝试理解是什么决定了事件处理程序在单击嵌套<div>时触发的顺序-我所看到的似乎与文档中的行为不一致，所以我正在寻找一些帮助来理解它。
我有两个嵌套的div，并且每个div都附加了两个事件处理程序，一个用于捕获阶段，一个用于冒泡阶段：
<html>
<head>
<script>
function setup(){
var outer = document.getElementById('outer');
oute
浏览 1提问于2012-08-07得票数 16
回答已采纳
如何防止JavaScript同时处理两个事件？我声明了一个事件处理程序，比如本例中的document.addEventListener('keydown',function(e) {},false)，我不希望该处理程序在处理完当前事件之前处理任何事件。
浏览 1提问于2012-01-26得票数 1
回答已采纳
我问了这个问题：。
我注意到PDF.js似乎在阻止document.onmousemove和document.onmouseup事件被触发。
我认为解决方案是使用元素的onmousemove和onmouseup，但是它的问题随之而来。
例如，如果鼠标移动得太快，元素的onmousemove和onmouseup事件将停止触发。同样的情况是，如果尝试将其拖出边界，元素的事件将停止触发。你可以在下面的片段里自己试一试。
// Modified from https://www.w3schools.com/howto/howto_js_draggable.asp
function dragEle
浏览 0提问于2021-07-29得票数 3
回答已采纳
我可以让元素在捕获阶段执行它们的处理程序，如下所示：
elem.addEventListener('event', handler, {once: false, capture: true});
将第三个参数设置为true也有效--有什么明显的原因吗？这样做有什么副作用吗？
浏览 1提问于2020-09-05得票数 1
回答已采纳
5回答
我只是想就JS中冒泡和捕获之间哪种更好的事件委托模式达成共识。
现在我明白了，根据特定的用例，人们可能希望使用捕获阶段而不是冒泡模式，反之亦然，但我想了解对于大多数一般情况，哪种委托模式是首选的，以及为什么(对我来说，它似乎是冒泡模式)。
或者换句话说，在W3C addEventListener实现背后有支持冒泡模式的原因吗？仅当指定第三个参数且该参数为true时，才会启动捕获。但是，您可以忘记第三个参数和冒泡模式已启用
我查找了JQuery的绑定函数来得到我的问题的答案，似乎它甚至不支持捕获阶段的事件(在我看来，这似乎是因为IE不支持捕获模式)。
所以看起来冒泡模式是默认的选择，但是为什么呢
浏览 1提问于2010-04-18得票数 20
回答已采纳
我怀疑eventlistener中的concept.What是以下两个代码之间的差异我怀疑当我用练习代码中的第二个代码替换第一个代码时，真/假section.no变化会发生。
a.addEventListener("click", modifyText, true);
a.addEventListener("click", modifyText, false);
浏览 1提问于2013-02-11得票数 9
回答已采纳
我想在target.addEventListener(type，listener，useCapture)的侦听器方法中确定useCapture的布尔值。有没有办法做到这一点，或者这是可能的？
target.addEventListener(type, listener[, useCapture]);
divs[i].addEventListener("click", listener, false);
function listener()
{
//Determine the false of useCapture here;
}
浏览 0提问于2013-04-10得票数 2
我是个新手，正在尝试在任何组件之外实现一些普通的JS侦听器。点击事件不会以任何方式改变页面内容，只会改变下拉菜单的可见性，所以我不认为将它们放在组件中是有意义的。
当我单击profileIcon目录时，下拉列表就会像预期的那样可见。但是，当我单击正文上的任何位置时，下拉菜单就会隐藏起来。即使我试图停止在dropdown侦听器中的传播，也会发生这种情况。
当我添加控制台语句时，我注意到body listener在dropdown listener之前被调用，基本上无论我做什么(例如，添加的顺序、调用各种超时函数、将body listener更改为document.getElementById(&
浏览 31提问于2018-06-08得票数 -1
是否有一种方法可以获得全局事件捕获，以便如果一个元素有一个单击事件，并且使用了stopPropagation，则全局事件捕获仍然会触发并运行自己的代码。
全局事件捕获是一个jquery插件，它对页面上的任何其他jquery/javascript一无所知。
谢谢。
浏览 1提问于2019-02-17得票数 1
回答已采纳
<html>
<div id="block"></div>
<script>
window.id = 'window'
const targets = [window, document.querySelector('#block')]
for (const target of targets) {
target.addEventListener('click', function(e) {
console.log(`
浏览 13提问于2021-09-27得票数 1
回答已采纳
当我运行这段代码时，为什么会首先触发.body事件？
document.addEventListener('click', function() {
console.log('The document was clicked');
});
document.body.addEventListener('click', function() {
console.log('The document body was clicked');
});
浏览 0提问于2019-07-11得票数 1
如果运行此代码并单击P，则会执行整个捕获阶段，但冒泡阶段会像div上预期的那样停止。这段代码有什么问题？ for(let elem of document.querySelectorAll('*')) {
elem.addEventListener("click", e => alert(`Capturing: ${elem.tagName}`), true);
elem.addEventListener("click", e => alert(`Bubbling: ${elem.tagName}`));
浏览 15提问于2019-01-23得票数 4
我有一个简单的jQuery折叠脚本的问题。我在这个页面上使用它来列出一些事件：
我遇到的问题是，当用户在包装器中的任何地方单击时，脚本就会折叠。我需要的脚本崩溃时，只有当用户点击事件的标题。
您可以看到这个jsfiddle有同样的问题：
我正在使用的脚本的完整代码可以在这里找到：
这是HTML：
<div id="va-accordion" class="va-container" style="">
<div class="va-wrapper">
<div class=&#
浏览 1提问于2012-12-02得票数 0
回答已采纳
我试图理解JavaScript的useCapture参数中的addEventListener()。这是我的HTML：
<div id="wrapper">
<button id="button">Click me</button>
</div>
这是我的JavaScript：
document.getElementById('wrapper').addEventListener('click', function () { console.log('Wrapper c
浏览 1提问于2013-08-07得票数 4
回答已采纳
1回答
我已经定义了这个事件处理程序：
document.addEventListener("load", function(){
alert("Called on page load");
}, false);
我注意到，当布尔标志被设置为false时，它不会被调用(在气泡阶段触发)。有人能帮我弄清楚为什么会这样吗。
浏览 0提问于2019-06-03得票数 3
回答已采纳
1回答
我对JavaScript不熟悉。
我自己写了一个扩展，但没成功。
扩展函数非常简单，即激活onselectstart参数，因为网页中的该参数使得无法选择网页的文本，然后复制它。如果激活此参数，则可以选择和复制。
我可以在chrome控制台中直接执行这个JavaScript命令，并启用onselectstart，运行良好：
document.body.onselectstart = function(){return true;};
但是，它将不会生效后，把它的延长。
我的扩展名很简单，只有两个文件：
manifest.json
{
"manifest_version":
浏览 8提问于2022-02-21得票数 0
回答已采纳
我有一个简单的GWT测试设置：
<g:HTMLPanel ui:field="container" width="500px" height="300px">
<g:Label ui:field="inner" text="hello"></g:Label>
</g:HTMLPanel>
添加了处理程序：
container.addDomHandler(new ClickHandler()
{
@Override
public void onC
浏览 1提问于2013-11-15得票数 5
回答已采纳
1回答
在jQuery中，事件处理程序的默认时间是气泡时间。比另一个有什么优势吗？
捕捉速度不快于泡泡吗？
浏览 1提问于2015-12-18得票数 4
回答已采纳
我知道在使用addEventListener时，您可以添加true的另一个参数，告诉它不要使用冒泡，而是使用捕获。这能告诉onclick在使用它而不是addEventListener时也使用捕获吗？
浏览 1提问于2020-12-07得票数 2
回答已采纳
我有一个幻灯片：
<div (mousedown)="onMouseDown($event)"
(mousemove)="onMouseMove($event)"
(mouseup)="onMouseUp($event)">
<div class="swiper-wrapper">
<div *ngFor="let item of items; index as i;">
浏览 5提问于2022-06-11得票数 0
回答已采纳
第三个参数(false)在中表示什么
document.addEventListener("deviceready",OnDeviceReady,false);
有没有人能给出一个示例脚本来说明不同之处
浏览 0提问于2013-07-10得票数 118
回答已采纳
2回答
我是Flash的新手，我遇到了一些麻烦：
所以我让我的类Main导入了一个类NavMenu。在中，有一个单击项的事件，它运行一个函数，我在其中写道：
dispatchEvent(new Event('my_event'));
在我的主类中，在我声明的构造函数中
addEventListener('my_event', my_event_handler);
我有一个EventHandler，其中我想要从舞台上删除一些孩子：
private function my_event_handler(event:Event):void
{
trace("m
浏览 2提问于2011-05-26得票数 1
回答已采纳
2回答
假设我有页面。现在我有了单击操作的事件侦听器，如下所示：
document.addEventListener('click', function() {
MyMagicHere();
});
现在，如果单击按钮“尝试它”，MyMagicHere()将被JS弹出。我希望执行MyMagicHere()，即使在单击此按钮的情况下。有什么办法/解决办法来处理这种情况吗？
浏览 13提问于2016-01-15得票数 1
回答已采纳
2回答
下面的代码简化了我的问题。当您单击a_element时，b_element将显示，并将创建一个事件侦听器来侦听第二次单击，这将隐藏b_element。问题是，使b_element显示的第一个单击也触发了嵌套的事件侦听器，即window.addEventListener。我是否可以编写这个窗口事件侦听器，这样它就不会在初次单击时执行？
var a_element = document.getElementById("a");
var b_element = document.getElementById("b");
function show_block (
浏览 1提问于2021-05-13得票数 1
回答已采纳
我有一个很大的文档，我需要监听这个文档上的所有mousemoves。我的第一个明显的想法是addEventListener() on body，但它可能会引入一些性能问题(你知道，冒泡的东西)。
在addEventListener() - useCapture中有一个神秘的参数。我不太了解DOM中事件传播的内部工作原理，但它看起来很有前途。
使用捕获阶段会更好，还是不值得呢？
浏览 0提问于2015-04-10得票数 1
我在网上看到的大多数代码都使用document.onkeydown，但是MDN只列出了。还建议使用window.onkeydown。是否有区别或理由使用一个而另一个呢？
浏览 1提问于2014-11-22得票数 9
回答已采纳
1回答
假设有一个div，它包含一个链接( href)，并且在整个页面上有三个事件监听器-点击-1，在div 3上有一个标记。如果用户单击a标记，如何触发侦听器？他们登记的顺序是什么？
浏览 2提问于2016-07-21得票数 4
假设我有一些这样的代码：
let myFunc = () => {
console.log("hello");
}
document.addEventListener("click", myFunc);
document.addEventListener("click", myFunc);
document.addEventListener("click", myFunc);
document.addEventListener("click", myFunc);
为什么点击文档只有一次控制
浏览 1提问于2020-09-17得票数 2
可能重复：
对于，我们希望当鼠标以粉红色的innerDiv从下面进入并离开而没有进入绿色的outerDiv时，绿色的outerDiv的鼠标中心事件不会被触发。
预期的行为发生在Chrome和Opera上，而不发生在Ffox身上。
下面是每个浏览器的jsfiddle代码的控制台输出。
Chrome/Opera输出(正确)：
pink innerDiv mouseenter
pink innerDiv mouseleave
Ffox产出：
pink innerDiv mouseenter
pink innerDiv mouseleave
left pink innerDiv but
浏览 1提问于2013-01-04得票数 1
根据古怪的说法，现代浏览器有一个捕获阶段和一个冒泡阶段。请参阅
如果我在事件处理程序中使用 (通过布尔参数设置为任一阶段)，它将如何工作？
这两种方法都管用吗？也就是说，如果我将其设置为捕获模式，它是否也会防止冒泡阶段。反之亦然。
这是W3引用( )。
我正在对事件处理程序进行故障排除，需要确切地了解stopPropagation()是如何工作的。
浏览 3提问于2013-08-26得票数 3
回答已采纳
1回答
这是我的代码，我想通过单击这个命令触发事件，windowID和panId。
默认情况下，它的发生顺序是相反的。
这是我的代码：
import mx.controls.Alert;
public function init() : void
{
window.addEventListener(MouseEvent.CLICK,function h() :void {mx.controls.Alert.show('window clicked');});
panel.addEventListener(MouseEvent.CLICK,function h() :void
浏览 1提问于2010-04-20得票数 0
3回答
我正在做一个来自w3school ()的lightbox教程，我想做的是当用户点击屏幕时关闭lightbox，但只有当它点击img之外的时候才会关闭。
使用我正在使用的这段代码，用户在哪里单击并不重要，它总是关闭lightbox....is，并有一种方法来解决这个问题。
$( 'body').on('click', function(event) {
closeModal();
});
浏览 9提问于2016-10-01得票数 1
1回答
如何防止任何已分配给元素的单击事件？ 我正在使用一个用户自定义的javascript来修改一个网站。该脚本在网页加载后运行。 如何防止已经绑定到元素的点击事件触发？ 绑定过程是不透明的，所以我无法获得函数的引用。此外，元素还绑定了一些其他事件，我想保留它们。 我用这段代码模拟了这种情况。我希望在鼠标悬停时显示hovering，但在单击时不显示click。这个是可能的吗？ const button = document.querySelector('button');
(() => {
button.addEventListener('click'
浏览 20提问于2021-10-06得票数 1
回答已采纳
1回答
window.document.addEventListener('click', function(e) {
event.preventDefault();
event.stopPropagation();
setTimeout(function(){e.target.dispatchEvent(e);}, 2000);
}, true);
<button onclick="console.log('test')">test</button>
为什么事件在2秒后没有触发？
浏览 0提问于2014-10-14得票数 0
我尝试使用jquery触发自定义事件，但由于某些原因，我似乎无法触发和/或捕获它们。
我使用jstree插件来创建一个带有文件夹的文件系统：
$('.filetree.global, .filetree.workspace').bind('select_node.jstree', function (event, data) {
alert('test ');
$(document).trigger( 'filePick').trigger( 'folderPick' );
}).jstree({
浏览 3提问于2011-08-26得票数 1
回答已采纳
我想在单击div时触发事件，但如果单击div上的特定链接，则不希望该事件触发：
我的JS
$("#myDiv").not("#myLink").click(function () {
alert("clicked");
});
//Or
$("#myDiv:not(#myLink)".click(function () {
alert("clicked");
});
$("body").on('click', '#myLink', functio
浏览 6提问于2013-04-14得票数 6
回答已采纳
1回答
这似乎是一个非常直截了当的问题，但我找不到适当的办法来解决这个问题。如何才能有一个主类禁用此元素的所有单击事件。
假设我有很多不同的按钮，如果这些按钮中有一个包含类btn-disabled，我希望它禁用所有附加到该元素的单击事件。
示例
$(document).on('click', '.btn-disabled', function() {
return false;
});
$(document).on('click', '.button:not(.btn-special)', function() {
aler
浏览 1提问于2021-04-05得票数 1
回答已采纳
在下的vue文档中，有一个名为capture的修饰符的示例，它说明了以下内容：
<!-- use capture mode when adding the event listener -->
<div v-on:click.capture="doThis">...</div>
我做了一些搜索，但还没有找到一个明确的答案，关于这是如何修改事件绑定的，然后我对自己说：“你知道谁总是有答案吗?堆栈溢出”
浏览 0提问于2017-02-02得票数 24
回答已采纳
2回答
假设我有这样的布局
<body>
<div class="A">
<span class="B">span</span>
</div>
<body>
我使用委托的非捕获处理程序，将到处的单击转换为自定义事件，并将其分派到其原始目标上：
document.addEventListener('click',function(e){
e.target.dispatchEvent(new CustomEvent('custom'));
}, fa
浏览 1提问于2013-01-06得票数 1
回答已采纳
这张图片来自 DOM启蒙 书。它说stopPropagation()将停止捕获和冒泡事件流阶段。 ? 我知道 stopPropagation() 将停止传播，并且不会在冒泡阶段执行回调函数。 但是在下面的代码片段中，在使用 stopPropagation() 在按钮上，仍然执行body事件回调方法。 有吗？ stopPropagation() 还要在捕获阶段停止事件流阶段吗？ const button = document.querySelector('button');
document.body.addEventListener('click&
浏览 54提问于2021-02-28得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
