时间戳

首页 > 解决方案 > 在 JavaScript 中捕获 true

javascript - 在 JavaScript 中捕获 true

问题描述

我有以下 html 并且事件冒泡对我来说它是如何工作的非常有意义。它会冒泡，所以点击三会给我三、二、一。点击两个，会给我两个和一个。

但是对于 capture: true，当我单击三个时，它会按我的感觉工作，它会从 1 下降到 3。我不明白的是，当我点击一两个时，为什么它没有捕获下来。如果我点击一个，它应该捕捉下来并给我一、二、三。如果我点击两个，它应该给我两个，三个。

const divs = document.querySelectorAll('div');

function logText(e) {
  console.log(this.classList.value);

}
divs.forEach(div => div.addEventListener('click', logText, {
  capture: true
}));
<div class="one">
one
  <div class="two">
  two
    <div class="three">
    three
    </div>
  </div>
</div>

标签： javascript

解决方案

在您的情况下，您可以通过冒泡来实现这一点。请参阅示例。

<!DOCTYPE HTML>
<html>

<head>
</head>

<body>

    <div class="one">
        one
        <div class="two">
            two
            <div class="three">
                three
            </div>
        </div>
    </div>

    <script>

        for (let elem of document.querySelectorAll('div')) {
            elem.addEventListener("click", e => {
                console.log(`Bubbling: \n${elem.innerText}`);
                e.stopPropagation();
            });
        }
    </script>

</body>

</html>

现在了解这里的捕获和冒泡：

<!DOCTYPE HTML>
<html>

<head>
</head>

<body>

    <div class="one">
        one
        <div class="two">
            two
            <div class="three">
                three
            </div>
        </div>
    </div>

    <script>

        for (let elem of document.querySelectorAll('div')) {

            elem.addEventListener("click", e => {
                console.log(`Capturing: \n${elem.innerText}`);
            }, true);

            elem.addEventListener("click", e => {
                console.log(`Bubbling: \n${elem.innerText}`);
            });
            
        }
    </script>

</body>

</html>

如果单击three，则顺序为：

1. one → two → three (capturing phase, the first listener).

2. three → two → one (bubbling phase, the second listener).

e.stopPropagation();这就是为什么您可以通过在冒泡侦听器中使用此事件停止冒泡阶段来实现预期结果的原因。

NOTE: Bubbling is convenient. Don’t stop bubbling without a need!

推荐阅读