Клик на родительский див через дочерний

236

04 февраля 2018, 02:52

При создании модального окна столкнулся с проблемой. Есть изображение, при клике на которое, открывается модальное окно, но на этом изображении есть несколько <span> (название, описание и т.д.).

При использовании event.target, если клик происходит на эти области <span>, то модальное окно не выводится. А если использовать event.currentTarget, то всплытие идет до самого контейнера с этими самыми изображениями (works).

Вопрос, как сделать , чтобы изображение открывалось при клике на родительский <div>, даже если клик произошел на его дочерний элемент?

Мой код:

<div class ="works">
    <div class="containerWorks">
        <h2 class="works_title"><span class = "line1">CHECK OUT SOME OF MY WORKS.</span></h2>
        <div class="works_img"  style ="background-image: url(1.jpg);">
            <div class="worksHover">
                <span class="works_span_plus">
                    +
                </span>
                <span class="works_span_name">
                    Menu <br>
                </span>
                <span class="works_span_name_desc">
                    description of project
                </span>
            </div>
        </div>

Answer 1

Проверку надо делать при клике такого вот вида.

e.target.closest('название родительского блока') ? имя функции которую надо вызвать если в родительском элементе есть необходимый селектор : '';

Answer 2

Попробуйте так:

    var works = document.getElementById('works'); 
    works.addEventListener('click', function (e) { 
      var target = e.target; 
      var parentBlock = this; 
      // получите доступ через this   
      // консоль для наглядности 
      console.log(parentBlock); 
      // target тоже нужен для дальнейших манипуляций 
      console.log(target); 
      // Обратите внимание, где target и где this 
    });

<div id="works"> 
  <div class="containerWorks"> 
    <h2 class="works_title"> 
      <span class="line1">CHECK OUT SOME OF MY WORKS.</span> 
    </h2> 
    <div class="works_img" style="background-image: url(1.jpg);"> 
      <div class="worksHover"> 
        <span class="works_span_plus"> + </span> 
        <span class="works_span_name"> Menu <br> </span> 
        <span class="works_span_name_desc"> description of project </span> 
      </div> 
    </div> 
  </div> 
</div>

Очень доступно описано тут.
Не знаю как вас, но меня учили на каждом шаге (пока я не до конца понимаю, что к чему), делать проверку через console.log(); и в принципе мне это помогает.

Answer 3

Как простой вариант решения: