js click event.target得到了子元素

2024-01-31 js click event event.target 子元素 727 0

如果你在事件处理函数中使用了 event.target，但得到的是子元素而不是绑定事件监听器的元素，这可能是因为你点击的是元素的子元素，而事件会向上传播到其父元素。

你可以使用 event.currentTarget 来获取绑定了事件监听器的元素，即使事件是从其子元素冒泡上来的。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
  <title>Click Event Example</title>
  <script>
    // 定义一个函数，用于处理点击事件
    function handleClick(event) {
      // 获取绑定了事件监听器的元素
      var clickedElement = event.currentTarget;
      
      // 在控制台输出绑定了事件监听器的元素
      console.log("Element with click event:", clickedElement);
    }
    
    // 添加事件监听器来监听点击事件
    window.onload = function() {
      // 获取需要添加点击事件监听器的元素
      var clickableElement = document.getElementById("clickable-element");
      
      // 添加点击事件监听器
      clickableElement.addEventListener("click", handleClick);
    };
  </script>
</head>
<body>
  <!-- 在页面中定义一个可点击的元素 -->
  <div id="clickable-element">
    Click me
    <button>Child Button</button>
  </div>
</body>
</html>

在这个示例中，当你点击 clickable-element 的子元素时，事件会冒泡到父元素 clickable-element 上，然后 handleClick 函数会被调用。在这个函数中，我们使用 event.currentTarget 来获取绑定了事件监听器的元素，即 clickable-element。然后我们在控制台输出了该元素。