У меня есть флажок, который я хочу выполнить Ajax-действие над событием click, однако флажок также находится внутри контейнера с его собственным поведением щелчка, которое я не хочу запускать при нажатии флажка. Этот пример иллюстрирует то, что я хочу сделать:
$(document).ready(function() {
$('#container').addClass('hidden');
$('#header').click(function() {
if ($('#container').hasClass('hidden')) {
$('#container').removeClass('hidden');
} else {
$('#container').addClass('hidden');
}
});
$('#header input[type=checkbox]').click(function(event) {
// Do something
});
});
#container.hidden #body {
display: none;
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="container">
<div id="header">
<h1>Title</h1>
<input type="checkbox" name="test" />
</div>
<div id="body">
<p>Some content</p>
</div>
</div>
Тем не менее, я не могу понять, как остановить всплывающее окно события, не вызывая поведение щелчка по умолчанию (флажок становится отмеченным / не отмеченным), чтобы не запускаться.
Оба следующих способа останавливают всплывающее окно события, но также не меняют состояние флажка:
event.preventDefault();
return false;
javascript
jquery
checkbox
events
roryf
источник
источник
Ответы:
замещать
с участием
event.stopPropagation ()
event.preventDefault ()
источник
.live()
метод, это не будет работать. Вам придется использоватьreturn false;
себя..on()
метода jQuery (live теперь не рекомендуется). Я не мог понять, почему возвращение false не работает.Используйте метод stopPropagation:
источник
Не забудьте IE:
источник
Как уже упоминали другие, попробуйте
stopPropagation()
.И есть еще один обработчик:
event.cancelBubble = true;
это специфичный для IE обработчик, но он поддерживается как минимум в FF. Не очень много знаю об этом, так как я сам этим не пользовался, но это может стоить того, если все остальное не поможет.источник
Это отличный пример для понимания концепции всплытия событий. Исходя из приведенных выше ответов, окончательный код будет выглядеть так, как указано ниже. Когда пользователь нажимает на флажок, распространение события на его родительский элемент 'header' будет прекращено с помощью
event.stopPropagation();
.источник
При использовании jQuery вам не нужно отдельно вызывать функцию остановки.
Вы можете просто вернуться
false
в обработчик событияЭто остановит событие и отменит барботирование.
Также смотрите event.preventDefault () против возврата false
Из документов JQuery:
источник
Кредит @mehras для кода. Я просто создал фрагмент, чтобы продемонстрировать это, потому что я думал, что это будет оценено, и я хотел найти оправдание, чтобы попробовать эту функцию.
источник
В angularjs это должно работать:
источник