1

Открытие popup происходит хорошо, но когда я нажимаю на содержимое popup например на один из input то он сразу закрывается, как я это могу решить?

const openButtonProduct = document.querySelectorAll('.cart-item__edit');
if(openButtonProduct) {
  const closeButtonProduct = document.querySelector('.cart-popup__close');
  const popupProduct = document.querySelector('.cart-popup');
  const overlay = document.querySelector('.overlay')

  overlay.addEventListener('click', () => {
    popupProduct.classList.add('hidden')
  })

  openButtonProduct.forEach(function(button) {
    button.addEventListener('click', () => {
      popupProduct.classList.remove('hidden')
    });
  
    closeButtonProduct.addEventListener('click', function() {
      popupProduct.classList.add('hidden')
    });
  });
}
cart-popup {
    display: flex;

    &__wrapper {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 100%;
        z-index: 92;
    }

    &__left {
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }

    &__body {
        position: relative;
        display: flex;
        gap: 20px;
        padding: 40px;
        background: #FFFFFF;
        box-shadow: 0px 14px 20px rgba(0, 0, 0, 0.1);
        border-radius: 50px;
    }

    &__close {
        position: absolute;
        top: -60px;
        right: 0;
    }

    &__img {
        width: 240px;
        height: 268px;
        display: flex;
        justify-content: center;
        background: #E4E4E5;
        border-radius: 22px;
        margin-bottom: 15px;
    }

    &__price-now {
        display: flex;
        margin-top: 15px;
    }
    
    &__heading {
        display: flex;
        align-items: center;
        font-weight: 600;
        font-size: 18px;
        gap: 3px;

        h4 {
            margin-bottom: 4px;
        }
    }

    &__textarea {
        width: 300px;
        padding: 10px 20px 10px 15px;
        background: #E8E8E8;
        border-radius: 15px;
        font-weight: 500;
        font-size: 12px;
        color: #6A6A6A;
        line-height: 15px;
        height: 65px;
        overflow: hidden;
    }

    &__input {
        width: 300px;
    }

    &__buttons {
        display: flex;
        gap: 10px;
        margin-top: 15px;
    }

    &__cancel {
        padding: 15px 40px;
        font-weight: 600;
        color: #6A6A6A;
        background: #E8E8E8;
        border-radius: 15px;
    }

    &__save {
        padding: 15px 27px;
    }

    &__col {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    &__col--left {
        gap: 30px;
    }

    &__help {
        margin-top: 4px;
        font-size: 10px;
        text-decoration: underline;
        text-decoration-color: #c30101;
    }

    &__form {
        display: flex;
        gap: 40px;
        margin-top: 12px;
    }
} 


.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(15px);
  z-index: 88;
}
<div class="cart-popup hidden">
    <div class="overlay">
        <div class="cart-popup__wrapper">
            <div class="cart-popup__body">
                <div class="cart-popup__left">
                    <button class="cart-popup__edit"><img src="/images/cart/edit.svg" alt=""></button>
                    <div class="cart-popup__image">
                        <div class="cart-popup__product">
                            <div class="cart-popup__img">
                                <img src="/images/cart/vtb.png" alt="">
                            </div>
                            <div class="price">
                                <div class="price__now cart-popup__price-now">
                                    <p>от 417.00 BYN</p> 
                                    <div class="product__question--red" data-qustion="Краткая подсказка: например, по цене: ещё раз повторить, что она не окончательная">
                                      <img src="/images/icons/red-qustion.svg" alt="question">
                                    </div>
                                    
                                </div>
                                <div class="price__sale">
                                  <p class="price__cost">от 507.00 BYN</p>
                                  <p class="price__percent">-18%</p>
                                  <div class="product__time" data-qustion="До конца акции 5 дней, 5 часов и 5 минут!">
                                    <img src="/images/cart/sale.svg" alt="sale">
                                  </div>
                                </div>
                              </div>
                        </div>
                    </div>      
                </div>
                
                <div class="cart-popup__right">
                    <a class="title" href="/product.html">НАЗВАНИЕ ПРОДУКТА<img src="/images/icons/link-icon.svg" alt=""></a>
                    <form action="" class="cart-popup__form">
                        <div class="cart-popup__col">
                            <div class="cart-popup__group">
                                <div class="product__title">
                                    <p>Ваши пожелания</p> 
                                    <div class="product__question" data-qustion="Краткая подсказка: например, по цене: ещё раз повторить, что она не окончательная">
                                      <img src="/images/product/question.svg" alt="question">
                                    </div>
                                  </div>
                                <textarea name="" id="" class="cart-popup__textarea">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
                                </textarea>
                                <div class="cart-popup__help red-text"><a href="/text-example.html">Нету текста для награды?</a></div>
                            </div>
                            <div class="cart-popup__group">
                                <div class="product__title">
                                    <p>Ориентировочные размеры</p> 
                                    <div class="product__question" data-qustion="Краткая подсказка: например, по цене: ещё раз повторить, что она не окончательная">
                                      <img src="/images/product/question.svg" alt="question">
                                    </div>
                                  </div>
                                <input type="text" class="input-text cart-popup__input" value="300*500*100 мм">
                            </div>
                            <div class="cart-popup__group">
                                <div class="product__title">
                                    <p>Дополнительные опции</p> 
                                    <div class="product__question" data-qustion="Краткая подсказка: например, по цене: ещё раз повторить, что она не окончательная">
                                      <img src="/images/product/question.svg" alt="question">
                                    </div>
                                  </div>
                                <select class="select">
                                    <option selected>Выберите</option>
                                    <option>Cappuccino</option>
                                    <option>Espresso</option>
                                    <option>Latte</option>
                                    <option>Mocha</option>
                                    <option>Frappe</option>
                                </select>
                            </div>
                            <div class="cart-popup__buttons">
                                <button class="cart-popup__save red-btn">Сохранить</button>
                                <button class="cart-popup__cancel">Отмена</button>
                            </div>
                        </div>
                        <div class="cart-popup__col cart-popup__col--left">
                            <div class="cart-popup__group">
                                <div class="product__title">
                                    <p>Крайний срок готовности</p> 
                                    <div class="product__question" data-qustion="Краткая подсказка: например, по цене: ещё раз повторить, что она не окончательная">
                                      <img src="/images/product/question.svg" alt="question">
                                    </div>
                                  </div>
                                <input type="date">
                            </div>
                            <div class="cart-popup__group">
                                <div class="cart-popup__heading">
                                    <h4>Количествои</h4>
                                </div>
                                <div class="counter">
                                    <div class="counter__wrapper">
                                        <button class="counter__btn--plus" onclick="stepper(this)"><img src="/images/cart/minus.svg" alt="minus"></button>
                                        <input type="number" min="1" max="100" step="1" value="1" class="counter__input">
                                        <button class="counter__btn--minus" onclick="stepper(this)"><img src="/images/cart/plus.svg" alt="plus"></button>
                                      </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <button class="cart-popup__close"><img src="/images/cart/close.svg" alt="close"></button>
            </div>
            
            <div class="question-tooltip">

            </div>
            <div class="tooltip--time"></div>
            <div class="question-tooltip--red"></div>
        </div>
    </div>
</div>

1
  • 1
    У вас весь попап внутри оверлея, куда ни кликай, попадешь в него, оверлей ВСЕГДА должен быть вне элементов
    – DaemonHK
    26 мая в 6:00

1 ответ 1

1

Потому что EventListener передаёться всем наследникам. Если например ты поставишь EventListener клика на BODY то куда-бы ты не кликнул он всегда отработает.

Решение? Проверить event.target. А точно-ли ты кликнул на свой элемент?!

const overlay = document.querySelector('.overlay')
overlay.addEventListener('click', (event) => {
  if (event.target.classList.contains('overlay')) {
    popupProduct.classList.add('hidden')
  }
})

ps:

Кстати расскажу по секрету, на этом эффекте был основан live эффект в jQuery. Когда можно было привязать EventListener к несуществующему элементу.

$('a').live("click", function() {
  alert("clicked");
});

Он по сути привязывал клик к body и уже после клика проверял target на совпадение с элементом.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.