单击img时单击div上的事件和不触发的文本。

Question

我用ES6/vanilla JS写了切换脚本。预期的功能非常简单，您可以单击切换div，它将一个active类添加到另一个div中，该div与toggle的data-toggle属性匹配。在我的切换div，我需要有文字和图像。当您单击div中的文本时，它会工作得很好，但是当您单击div中的图像时，切换将不会触发。我是否需要做一些具体的工作来把所有的孩子都包括在div中？

由于某些原因，我甚至无法通过这个代码片段编辑器来实现这个功能，但是它在我的项目中工作。

​

const setActive = (toggles, panels, id) => {
  let activePanel = panels.filter(panel => panel.getAttribute('data-toggle') == id)
  let activeToggle = toggles.filter(toggle => toggle.getAttribute('data-toggle') == id)
  activePanel.forEach(panel => panel.classList.add('active'))
  activeToggle.forEach(toggle => toggle.classList.add('active'))
}

const removeActive = (nodes) => {
  nodes.forEach(node => node.classList.remove('active'))
}

const handler = (event) => {
  event.preventDefault()
  let id = event.target.getAttribute('data-toggle')
  let panels = Array(...document.querySelectorAll('.js-toggle-panel'))
  let toggles = Array(...document.querySelectorAll('.js-toggle'))
  removeActive(panels)
  removeActive(toggles)
  setActive(toggles, panels, id)
}

let toggles = Array(...document.querySelectorAll('.js-toggle'))
toggles.forEach(toggle => toggle.addEventListener('click', handler))

.toggle-panel {
  display: none;
}

.toggle-panel .active {
  display: block;
}

<div class="js-toggle toggle" data-toggle="toggle-1">
  <img src="https://via.placeholder.com/50"> First toggle
</div>

<div class="js-toggle toggle" data-toggle="toggle-2">
  Second toggle
</div>

<div class="js-toggle-panel toggle-panel" data-toggle="toggle-1">
  <h1>Toggle 1</h1>
</div>

<div class="js-toggle-panel toggle-panel" data-toggle="toggle-2">
  <h1>Second toggle!</h1>
</div>

​

Answer 1

我改变了两件事，我相信这能解决你的问题：

1. 我将选择器.toggle-panel .active更改为.toggle-panel.active--如果没有，即使在JS按您的意愿工作的情况下，也没有任何东西是可见的。
2. 我将您的代码从使用event.target移到了event.currentTarget --前者总是指向单击元素，而后者则指向已放置侦听器的元素。

看下面的片段。

​

const setActive = (toggles, panels, id) => {
  let activePanel = panels.filter(panel => panel.getAttribute('data-toggle') == id)
  let activeToggle = toggles.filter(toggle => toggle.getAttribute('data-toggle') == id)
  activePanel.forEach(panel => panel.classList.add('active'))
  activeToggle.forEach(toggle => toggle.classList.add('active'))
}

const removeActive = (nodes) => {
  nodes.forEach(node => node.classList.remove('active'))
}

const handler = (event) => {
  event.preventDefault()
  let id = event.currentTarget.getAttribute('data-toggle')
  let panels = Array(...document.querySelectorAll('.js-toggle-panel'))
  let toggles = Array(...document.querySelectorAll('.js-toggle'))
  removeActive(panels)
  removeActive(toggles)
  setActive(toggles, panels, id)
}

let toggles = Array(...document.querySelectorAll('.js-toggle'))
toggles.forEach(toggle => toggle.addEventListener('click', handler))

.toggle-panel {
  display: none;
}

.toggle-panel.active {
  display: block;
}

<div class="js-toggle toggle" data-toggle="toggle-1">
  <img src="https://via.placeholder.com/50"> First toggle
</div>

<div class="js-toggle toggle" data-toggle="toggle-2">
  Second toggle
</div>

<div class="js-toggle-panel toggle-panel" data-toggle="toggle-1">
  <h1>Toggle 1</h1>
</div>

<div class="js-toggle-panel toggle-panel" data-toggle="toggle-2">
  <h1>Second toggle!</h1>
</div>

​

Answer 2

与event.target不同，您应该在handler函数中使用event.currentTarget来返回连接事件侦听器的节点。event.target正在返回<img>节点，而不是在您的示例中返回带有data-toggle的<div>。