单击多次才能显示/隐藏元素？事件委托来巧妙解决

javascript

2024-03-09 23:02:04

解决显示/隐藏元素的重复点击问题：事件委托的妙用

在构建交互式网页时，我们经常需要根据用户点击来显示或隐藏特定元素。虽然使用 onclick 事件监听器来实现此目的很常见，但它可能会导致多次点击才能触发所需的操作。为了解决这个问题，事件委托提供了一种更有效的方法。

事件委托：一次点击，多种响应

事件委托是一种在 JavaScript 中用于优化事件处理的技术。它涉及将事件监听器附加到父元素，而不是直接附加到子元素。当子元素发生事件时，它会冒泡到父元素，从而触发父元素上的事件监听器。

在我们的场景中，这意味着我们可以将单击事件监听器附加到文档主体，而不是附加到每个游戏信息 div。这样，当单击任何游戏信息 div 时，事件都会冒泡到文档主体，从而触发单击事件处理程序。

实现事件委托

要使用事件委托，我们需要：

将单击事件处理程序附加到文档主体：

$(document.body).click(function(e) {
  // 代码...
});

在事件处理程序中，检查单击的元素是否具有游戏信息 div 的类：

if ($(e.target).hasClass("game-info")) {
  // 代码...
}

如果单击了游戏信息 div，获取信息部分并显示或隐藏它：

const info = gameInfo.children(".info");
info.toggle();

代码示例

以下是使用事件委托实现显示/隐藏元素功能的代码示例：

<div class="game-info">
  <p onclick="toggler()">Game Name</p>
  <div class="info">
    <img src="image.jpg">
    <p>Game Description</p>
  </div>
</div>

<script>
$(document.body).click(function(e) {
  if ($(e.target).hasClass("game-info")) {
    const gameInfo = $(e.target);
    const info = gameInfo.children(".info");
    info.toggle();
  }
});
</script>