onclick & несколько элементов

302

22 января 2017, 17:01

Всем привет.

суть проблемы - есть много элементов с разметкой как ниже. На них навешиваются функции onclick.

document.addEventListener('DOMContentLoaded', function() { 
  var goods = document.querySelectorAll('div.good'); 
 
  for (var z = 0; z < goods.length; z++) { 
    goods[z].onclick = function() { 
      var text = this.querySelector('.details p').innerHTML; 
      var img = this.querySelector('img').getAttribute('src'); 
      alert(img + ' ' + text); 
    }; 
  } 
});

<div class="good"> 
  <img src="/assets/img/good4.png"> 
  <div class="details"> 
    <div><span class="icon goods beef blue"></span> 
    </div> 
    <p>Курица по-тайски</p> 
    <span class="price">299</span> 
  </div> 
</div> 
<div class="good"> 
  <img src="/assets/img/good2.png"> 
  <div class="details"> 
    <div><span class="icon goods beef blue"></span> 
    </div> 
    <p>Говядина томленая</p> 
    <span class="price">228</span> 
  </div> 
</div>

В итоге элемент по которому кликаем не соответствует тому, что получаем через this в функции. Воспроизвести не смогу, поэтому могу только преддложить посмотреть в живую - music.redeye.pro (Речь идёт о клике на товары). Спасибо.

Характерно, что проявляется это для нижних рядов, а в this прилетают верхние над ними

Answer 1

Элементы

<img class="under" src="/assets/img/circle.png">

в первом ряду накрывают все, что ниже. Click-и попадают в них.

Answer 2

Получается что блок мешает кликать по элкментам, скрин:

Пробовал скрыть его, тогда все ок!