Как предотвратить событие click() через дочерний div в родительский div в jQuery?

Ситуация:

<div class="header">
    <div style="float: left;" class="headerTitle">+ OPEN</div>
    <div class="closeBtn" style="float: right;">- CLOSE</div>
 </div> 
<div class="touristenContent">.....</div>

Визуально:

|+Open..............................|-Close|..| (header)

|............Content..........................|

Заголовок DIV - это "большая кнопка" с событием jQuery click() для открытия содержимого. Закрытие DIV находится внутри большого заголовка DIV и представляет кнопку закрыть также с событием click(), чтобы закрыть содержимое. Эта кнопка закрыть доступна только при нажатии на большой заголовок.

Нажмите на заголовок и откройте контент, как ожидается, но нажав кнопку закрыть, дайте событию клика перейти в заголовок DIV. Содержимое закрывается и открывается снова из-за двух кликов.

Итак, как я могу правильно спроектировать все, чтобы сделать закрыть кнопку сплошной и предотвратить щелчок по ней в заголовке?

Ответ 1

Вам нужно остановить распространение события в дереве DOM:

$('.closeBtn').click(function (evt) {
    evt.stopPropagation();

    // Your code here
});

Ответ 2

$('.closeBtn').click(function (event){
   event.stopPropagation();
   //   ... your code here
   return false;
});

который должен делать трюк, поэтому каждый раз, когда вы нажимаете на его закрытие, это не влияет на ваш заголовок div,

Ответ 3

Почему бы не перехватить событие open с <div style="float: left;" class="headerTitle">+ OPEN</div> вместо родительского div. В противном случае return false или stopPropagation из внутреннего обработчика элемента div