如何使用 Javascript 到达 HTMLDivElement 对象中的 div 之外

Question

我有几个 HTML 元素代表单击时要翻转的图块。每个元素都有一个容器 div，其中包含两个 div，一个用于磁贴的正面和背面。

<div class="flip-container" data-tile>
    <div class="flipper">
      <div class="front white">
        <!-- front content -->
      </div>
      <div class="back blue">
        <!-- back content -->
      </div>
    </div>
  </div>

我在 CSS 中制作了动画，因此图块在悬停时会“翻转”。到目前为止，一切都很好。现在我试图在单击时更改“翻转容器”的类列表，以便从我的样式中调用不同的类名 sheet。

我的问题是我的 handleClick 函数只针对 inner-div“back-blue”，而不是包含两个 divs 的“flip-container”。

const tileData = document.querySelectorAll('[data-tile]')
const flipContainers = Array.from(
  document.getElementsByClassName('flip-container')
)


flipContainers.forEach((container) => {
  container.addEventListener('click', handleClick, { once: true })
})

function handleClick(e) {
  console.log('clicked')
  const container = e.target
  const currentClassColor = 'blue'
  fixColor(container, currentClassColor)
}

function fixColor(container, currentClassColor) {
  container.classList.add(currentClass)
}

我尝试通过选择数据标签和从特定类名中获取数组来查询“翻转容器”。在这两种情况下，整个元素仍然被抓取，点击的目标仅适用于内部 div。我想这是有道理的，为什么会发生这种情况，但有没有一种方法可以访问容器，即使点击目标是内部 divs 之一？

Answer 1

你想要的大概是e.currentTarget.

The currentTarget read-only property of the Event interface identifies the current target for the event, as the event traverses the DOM. It always refers to the element to which the event handler has been attached, as opposed to Event.target, which identifies the element on which the event occurred and which may be its descendant.

https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

如果这对你的情况不起作用，你会想要尝试 e.currentTarget.parentNode

Answer 2

e.target 是被点击的 div，如果你想要事件处理程序附加到的 div，你可以使用 this 关键字或 e.currentTarget.

function handleClick(e) {
  console.log('clicked')
  // const container = this
  const container = e.currentTarget
  const currentClassColor = 'blue'
  fixColor(container, currentClassColor)
}

如何使用 Javascript 到达 HTMLDivElement 对象中的 div 之外

How to reach outside of a div in an HTMLDivElement object with Javascript

javascript

addeventlistener

getelementsbyclassname