Блокировка клика для внутренних блоков

217

27 июля 2018, 12:00

<div class="gallery" onclick="return location.href = 'path/to/'">
    <div class="next"></div>
    <div class="prev"></div>
</div>

Нужно чтобы обработчик события onclick, повешенный на .gallery, не вызывался при клике на дочерние блоки. Как это сделать?

Answer 1

Если есть возможность добавить код после кода добавления блоков, то решение есть простое и короткое:

$(".gallery").append("<div class='next'><div>xxx</div></div>"); 
$(".gallery").append("<div class='prev'></div>"); 
 
//добавляем обработчик события клика для блоков и блокируем всплытие события 
$(".next,.prev").on("click", function() { 
  return false; 
});

.gallery { 
  border: 1px solid; 
  width: 200px; 
  height: 300px; 
} 
 
.next,.prev { 
  border: 1px solid; 
  width: 100px; 
  height: 100px; 
}

<div class="gallery" onclick="return location.href = 'path/to/'"></div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Если же такой возможности нет, то стоит переписать обработчик события click у .gallery:

$(".gallery").on("click", function(event) { 
  //клик по самому элементу .gallery можно не проверять 
  if (event.target != this) { 
    //так как внутри блоков .next и .prev могут быть "дети", 
    //то нужные классы стоит искать в элементах от event.target до .gallery 
    var $targets = $(event.target).parentsUntil(".gallery").addBack(); 
    if ($targets.hasClass("next") || $targets.hasClass("prev")) { 
      //если у элемента, на который кликнули, или у его родителя есть нужный класс, 
      //то блокируем всплытие события 
      return false; 
    } 
  } 
  location.href = "path/to/"; 
});

.gallery { 
  border: 1px solid; 
  width: 200px; 
  height: 300px; 
} 
 
.next,.prev { 
  border: 1px solid; 
  width: 100px; 
  height: 100px; 
}

<div class="gallery"> 
  <div class="next"><div class="xxx">xxx</div></div> 
  <div class="prev"></div> 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

Не будет срабатывать на элементе .next и .prev, на элементах <a>.

$('.gallery').on('click',function(e){ 
var click_class = $(e.target).attr('class'); 
if (	click_class === 'prev' ||  
		click_class === 'next' 	) { 
console.log('element clicked is',e.target) 
} else { 
return location.href = 'path/to/'; 
}})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="gallery"> 
    click here 
    <div class="next">Вперёд</div> 
    <div class="prev">Назад</div> 
</div>