событие.stopPropagation(); ведет себя не так, как ожидалось

Я прочитал пару статей, связанных с event.stopPropagation();, но ни одно из предложенных решений не работает для меня. По сути, у меня есть виджет-аккордеон со всеми элементами, свернутыми по умолчанию. В заголовке каждого элемента (тег dt) также есть флажок. При установке флажка аккордеон не должен расширять его элементы.

<dt data-toggle="collapse">
<span class="subscribe-checkbox"><button type="button" class="btn toggle-btn" data-toggle="button"></button></span>
</dt>
<dd>
<p>Accordion content...</p>
</dd>

Щелчок по диапазону (который должен действовать как флажок) должен добавить к нему проверенный класс. Однако он также расширяет элемент аккордеона (тег dd). Что я делаю в jQuery:

$('.accordion-group .btn.toggle-btn').click(function (event) {
event.stopPropagation();
});

Хотя содержимое аккордеона не отображается (что хорошо), элемент <span> также не меняет класс, поэтому он не становится «отмеченным». Я тоже пытался с .live() и тоже не работал.


person Ciprian Amaritei    schedule 09.04.2012    source источник


Ответы (2)


Вы должны использовать addEventListener, а затем использовать логический аргумент Capture для управления поведением родительских элементов.

person Ralf    schedule 23.08.2012

stopPropagation() не работает, потому что <dd> не является родителем <span>, поэтому событие не распространяется от <span> к <dd>.

Вам придется немного изменить структуру обработчиков, возможно, удалить обработчик кликов для родительского элемента всего этого кода и добавить новый обработчик для <dd>.

person mihai    schedule 09.04.2012
comment
Спасибо за ответ. Итак, поведение такое: - нажмите на ‹dt› и отобразится ‹dd›. - нажмите на ‹span›, который находится внутри ‹dt›, span станет отмеченным, а ‹dd› не будет отображаться. Поэтому я думаю, что проблема связана с ‹dt›, а не с ‹dd› и ‹p›. Поскольку событие щелчка распространяется на ‹dt›, который является родителем диапазона. Я что-то упускаю? - person Ciprian Amaritei; 09.04.2012
comment
Я думаю, вам нужно показать больше кода, какие еще обработчики кликов у вас есть? - person mihai; 09.04.2012