如何使用Javascript访问HTMLDivElement对象中的div外部

Question

我有几个HTML元素，它们表示单击时要翻转的瓦片。每个元素都有一个容器div，其中包含两个div，一个用于tile的前面和后面。

<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中制作了动画；翻转"；悬停时。到目前为止还不错。现在我正试图更改"的classList；翻转容器"；单击，以便从我的样式表中调用不同的className。

我的问题是，我的handleClick函数只针对内部div"；背蓝色"；，而不是"；翻转容器"；它同时持有两个div。

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)
}

我已尝试查询"；翻转容器"；既可以通过选择数据标记，也可以通过从特定className中获取数组。在这两种情况下，整个元素仍然被抓取，点击的目标只适用于内部div。我想这是有道理的，但即使点击目标是内部div之一，我也有办法访问容器吗？

Answer 1

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)
}

Answer 2

您想要的可能是e.currentTarget。

Event接口的currentTarget只读属性标识事件的当前目标。它始终引用事件处理程序所指向的元素附加，而不是Event.target，后者标识上的元素哪个事件发生了，哪个可能是它的后代。

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

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