單擊事件未正確返回正確的元素

Question

我正在嘗試創建一張在點擊時旋轉的卡片。 它正在工作，但我想使用onclick事件將“is-flipped”class 添加到 div.card 的類列表中。 當我在控制台記錄事件時，它顯示目標為<div class="card__face card__face--front">front</div>和 currentTarget 為 null。我認為這是由於絕對定位，所以我嘗試了 z-index: 100 仍然沒有在職的。 為什么會這樣，我怎樣才能得到.card div。

 // var card = document.querySelector(".card"); // card.addEventListener("click", function () { // card.classList.toggle("is-flipped"); // }); function handleCardClick(e) { // e.stopPropagation(); console.log(e); }

 * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "Poppins", sans-serif; } body { font-family: sans-serif; }.wrapper { width: 200px; height: 260px; border: 1px solid #ccc; margin: 40px 0; perspective: 600px; }.card { width: 100%; height: 100%; transition: transform 1s; transform-style: preserve-3d; cursor: pointer; position: relative; z-index: 100; }.card.is-flipped { transform: rotateY(180deg); }.card__face { position: absolute; width: 100%; height: 100%; line-height: 260px; color: white; text-align: center; font-weight: bold; font-size: 40px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }.card__face--front { background: red; }.card__face--back { background: blue; transform: rotateY(180deg); }

 <div class="wrapper"> <div class="card" onclick="handleCardClick(event)"> <div class="card__face card__face--front">front</div> <div class="card__face card__face--back">back</div> </div> </div> <div class="main" onclick="handleCardClick(event)">123456789</div>

Answer 1

為了使用“card”元素上的類進行操作，請嘗試：

const card = document.querySelector('.card');
card.addEventListener('click', function(){
 card.classList.toggle('is-flipped')
})

如果你想使用 onclick="" 那么你應該添加 "pointer-events: none;" 屬性 to.card 子元素

.card__face {
pointer-events: none;}

和

function handleCardClick(e) {

const currentEl = e.target;
currentEl.classList.toggle('is-flipped')}