JavaScript，单击按钮激活父事件监听器

Question

我的页面上有两个按钮，用于尝试新事物。 它们都使用链接到不同 JS 函数的“onclick”。 出于某种原因，第二个激活了两者？ 而且我无法弄清楚我做错了什么。

HTML 如下所示：

<!DOCTYPE html>
<html>
    <head>
        <link HREF="styleTest.css" rel="stylesheet">

        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Roboto+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
    
        <script type="text/javascript" src="script.js"></script>

        <title>TEST</title>

    </head>

    <body>
        <div class="page">


        <div class="nav-container" onclick="hamburger(this)">
            
            <div class="ham-container">
                <div class="hamburger-1"></div>
                <div class="hamburger-2"></div>
                <div class="hamburger-3"></div>
            </div> 

            <div class="nav-bar">
                <a>Home</a>     
                <a>Services</a>     
                <a>About</a>    
                <a>Projects</a>
            </div>



            <div class="button-test">
                <button onclick="clickTest()">CLICK ME</button>
                <h1>Test text</h1>
            </div>

        </div>


    </body>

以及两个 JS 函数：

function hamburger(x) {
    x.classList.toggle("change");
  }

var i =0

function clickTest() {
  i++;
  console.log(i)
}

我究竟做错了什么？

Answer 1

当你在一个元素上触发一个事件时，它会依次为它的父亲、它的祖父……一直到最后一个父元素触发。 通常我们看不到这种行为发生，因为我们通常在一个元素家族中有一个事件侦听器。

但是，如果触发的元素位于具有同一事件的事件侦听器的父级中，就像您的情况一样，它们都会被触发。 但是，您可以在stopPropagation方法的帮助下防止这种行为，这样：

function clickTest(e) {
  e.stopPropagation();
  i++;
  console.log(i)
}

Answer 2

事件侦听器的工作方式是，当您有一个嵌套对象（例如 div 内的按钮）并且它们都有事件侦听器时，当您单击内部元素（按钮）时， button的事件侦听器将首先被触发父事件监听器

要解决此问题，您必须使用此代码停止传播

<button onclick="clickTest(event)">CLICK ME</button>

还有剧本

  function clickTest(e) {
  e.stopPropagation();
  i++;
  console.log(i)
}

Answer 3

这是因为 DOM 中称为Bubbling的概念。

当一个事件发生在一个元素上时，它首先在其上运行处理程序，然后在其父级上运行，然后一直在其他祖先上运行。

尝试使用下面的这段代码。

 <style> body * { margin: 10px; border: 1px solid blue; } </style> <form onclick="alert('form')">FORM <div onclick="alert('div')">DIV <p onclick="alert('p')">P</p> </div> </form>

单击内部<p>首先运行 onclick：

在那个<p>上。

然后在外部<div>上。

然后在外部<form>上。

依此类推，直到文档对象。

请参阅此页面以获得更清晰的信息：链接

JavaScript，单击按钮激活父事件监听器

问题描述

3 个解决方案

解决方案1
2 2022-03-07 20:37:18

解决方案2
1 2022-03-07 20:44:17

解决方案3
1 已采纳 2022-03-07 20:44:21

JavaScript，单击按钮激活父事件监听器

问题描述

3 个解决方案

解决方案1 2 2022-03-07 20:37:18

解决方案2 1 2022-03-07 20:44:17

解决方案3 1 已采纳 2022-03-07 20:44:21

解决方案1
2 2022-03-07 20:37:18

解决方案2
1 2022-03-07 20:44:17

解决方案3
1 已采纳 2022-03-07 20:44:21