Estoy tratando de crear una tarjeta que gira al hacer clic. Está funcionando, pero quiero usar el evento onclick para agregar la clase 'está volteada' a la lista de clases de div.card. Cuando registro el evento en la consola, muestra el objetivo como <div class="card__face card__face--front">front</div> y currentTarget como nulo. Pensé que esto se debía al posicionamiento absoluto, así que probé z-index: 100 que aún no funciona. ¿Por qué sucede esto y cómo puedo obtener el div .card?
// 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>para manipular con clases en el elemento 'tarjeta' intente:
const card = document.querySelector('.card'); card.addEventListener('click', function(){ card.classList.toggle('is-flipped') })si desea utilizar onclick="", debe agregar "pointer-events: none;" propiedad a elementos secundarios .card
.card__face { pointer-events: none;}y
function handleCardClick(e) { const currentEl = e.target; currentEl.classList.toggle('is-flipped')}