Как сделать так, что бы событие click по переднему элементу, не затрагивало элемент под ним?

Question

Не думаю что в описании я правильно объяснил. Но суть такая, есть Блок в котором есть БлокХовер (он имеет стиль top:100%, так что он уезжает вниз за пределы родителя) и при нажатии на Блок, БлокХовер выезжает (приобретает top:0px). Вот тут проблема, нужно что бы при нажатии на БлокХовер он уезжал обратно (принимал top:100%). Но как я понял одновременно с этим обрабатывается событие клика Блока

Это пример на codepen

<div class="block">
 <div class="blockHover"></div>
</div>

.block{
 width: 300px;
 height: 400px;
 background-color: green;
 overflow: hidden;
}

.blockHover{
  width: 300px;
  height: 400px;
  background-color: blue;
  position: relative;
  top: 100%;
  transition: .4s ease;
 }

 $('.block').click(function() {
  $('.blockHover').css('top', '0');
 });

 $('.blockHover').click(function() {
  $('.blockHover').css('top', '100%');
 });

Answer 1

Вызовите

e.stopPropagation();

внутри события

$('.block').click(function(e) {
  e.stopPropagation(); 
  $('.blockHover').css('top', '0');
});

$('.blockHover').click(function(e) {
  e.stopPropagation(); 
  $('.blockHover').css('top', '100%');
});

.block{
  width: 300px;
  height: 400px;
  background-color: green;
  overflow: hidden;
}

.blockHover{
  width: 300px;
  height: 400px;
  background-color: blue;
  position: relative;
  top: 100%;
  transition: .4s ease;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block">
   <div class="blockHover"></div>
 </div>

Answer 2

Используйте event.stopPropagation(); Что бы запретить событие всплывать.

$('.block').click(function(event) {
  event.stopPropagation();
  $('.blockHover').css('top', '0');
});

$('.blockHover').click(function(event) {
  event.stopPropagation();
  $('.blockHover').css('top', '100%');  
});

БЛОГ НА HUSL

Как сделать так, что бы событие click по переднему элементу, не затрагивало элемент под ним?

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