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

Question

Положение:

<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 (), чтобы закрыть содержимое. Эта кнопка закрытия видна только при нажатии на большой заголовок.

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

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

Answer 1

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

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

    // Your code here
});

Answer 2

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

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

Answer 3

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