如何处理对嵌套元素的点击？ [复制]答案

【问题标题】：How to handle clicks on nested elements? [duplicate]如何处理对嵌套元素的点击？ [复制]
【发布时间】：2022-02-22 13:42:24
【问题描述】：

我的任务是制作 7 个嵌套的 div，这样被点击的 div 应该将其颜色更改为白色，而所有被点击的 div 的上层 div 应该将其颜色更改为橙色。而所有较低的 div 应将其颜色更改为绿色。

$(".div").click(function() {
  $(this).css({
    "background-color": "white"
  });
  $(this).parents().css({
    "background-color": "orange"
  });
  $(this).children().css({
    "background-color": "green"
  });
});

<!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">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <title>Document</title>
  <style>
    div {
      border: 2px solid black;
      margin: 30px 20px;
    }
  </style>
</head>

<body>
  <div id="main">
    <div class="div" id="1">
      <div class="div" id="2">
        <div class="div" id="3">
          <div class="div" id="4">
            <div class="div" id="5">
              <div class="div" id="6">
                <div class="div" id="7">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

【问题讨论】：

将 $(".div").click(function() { 更改为 $(".div").click(function(e) { ，以捕获点击事件。然后添加e.stopPropagation(); 以停止答案中给出的 event.explanation 的冒泡效果。

标签： javascript html jquery

【解决方案1】：

实际上，你已经很接近了！无聊和非交互式输出的原因是事件如何通过元素冒泡。这是一篇关于 mdn about events 的精彩文章，但最重要的一点是关于停止传播。

标准的 Event 对象有一个可用的函数，称为 stopPropagation()，当在处理程序的事件对象上调用它时，它会运行第一个处理程序，但事件不会在链上进一步冒泡，所以没有将运行更多处理程序。

因此，在您的示例中，可能会单击原始 div，但其他 div 也会收到单击并运行它们的代码。尝试添加 event.stopPropagation() 并查看它的变化。

附：您需要在 click 处理程序中获取 event 对象:)

附言我相信开始更多地使用console.log 并尽快熟悉调试工具将对您有很大帮助。例如，在这种情况下，在click 处理程序中添加console.log 语句会让您问这样一个问题：“为什么我的点击会触发多个元素？”

【讨论】：

@Namaskar 但是如果我第二次单击不同的 div 会怎样。我不想在我的新输出中使用以前的输出？
@YashRaval 好问题。我将再次推荐记录事物。我会从console.log(this) 开始，并在单击时查看它是什么元素。然后还记录所有父母$(this).parents()，然后记录所有孩子$(this).children()，看看发生了什么。查看 jQuery 文档和其他示例用法。例如在你最喜欢的搜索引擎上搜索，“jquery children`，看看它做了什么，等等。祝你好运:)

【解决方案2】：

您可以通过调用 event.stopPropagation() 来实现这一点

<div class='item' onClick="alert('div');">
    <button class='btn' 
     onClick="alert('button');event.stopPropagation();">Action Now</button>
</div>

【讨论】：