При щелчке на карту, она переворачивается

Question

    document.addEventListener('click', function () {
        document.getElementById('card').classList.toggle('flip')
    })

        .container {
            margin: 100px auto auto 100px;
            position: relative;
            width: 190px;
            height: 266px;
        }

        #card {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            position: absolute;
            transition: transform 0.5s;

            transform-style: preserve-3d; /*  */
        }

        #card.flip {
            transform: rotateY(180deg);
        }

        figure {
            width: 100%;
            height: 100%;
            position: absolute;
            display: block;
        }

        .back {
            background: url(http://www.xiper.net/examples/html-and-css-tricks/effects/card-back.png);
        }

        .front {
            background: url(http://www.xiper.net/examples/html-and-css-tricks/effects/card-front.png);
            transform: rotateY(180deg); /*  */
        }

<div class="container">
    <div id="card" class=" ">
        <figure class="back"></figure>
        <figure class="front"></figure>
    </div>
</div>
<br/><br/>

У меня при щелчке на карту, она переворачивается, но работает даже если кликнул не по картинке.(типо в любую точку страницы) Как сделать, что бы именно на картинку нужно было кликнуть

Answer 1

Ну а что вы хотите, раз вы на весь документ навесили обработчик события

document.addEventListener('click', function () {

Повесьте его на объект:

document.querySelector('#card').addEventListener('click', function () {
    document.querySelector('#card').classList.toggle('flip')
})

.container {
            margin: 100px auto auto 100px;
            position: relative;
            width: 190px;
            height: 266px;
        }

        #card {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            position: absolute;
            transition: transform 0.5s;

            transform-style: preserve-3d; /*  */
            
            border: 1px solid black;
        }

        #card.flip {
            transform: rotateY(180deg);
        }

<div class="container">
    <div id="card" class=" ">
        <figure class="back"></figure>
        <figure class="front"></figure>
    </div>
</div>
<br/><br/>

БЛОГ НА HUSL

При щелчке на карту, она переворачивается

Ответы (1 шт):