Как остановить событие пузырится на флажок нажмите

у меня есть флажок, который я хочу выполнить некоторое действие Ajax на событии click, однако флажок также находится внутри контейнера с его собственным поведением щелчка, которое я не хочу запускать при нажатии флажка. Этот пример иллюстрирует то, что я хочу сделать:

<html lang="en">
    <head>
        <title>Test</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
        $(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
            });
        });
        </script>
        <style type="text/css">
        #container.hidden #body {
            display:none;
        }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="header">
                <h1>Title</h1>
                <input type="checkbox" name="test" />
            </div>
            <div id="body">
                <p>Some content</p>
            </div>
        </div>
    </body>
</html>

однако я не могу понять, как остановить пузырящееся событие, не вызывая поведение щелчка по умолчанию (флажок становится проверенным/непроверенным), чтобы не запускаться.

оба из следующих остановите событие пузырится, но также не изменяйте состояние флажка:

event.preventDefault();
return false;
8 155
javascript jquery events checkbox

8 ответов:

заменить 

event.preventDefault();
return false;

С

event.stopPropagation();

событие.stopPropagation ()

останавливает бурление события, чтобы родительские элементы, препятствующие любому родителю обработчики от получения уведомления о событие.

событие.preventDefault ()

предотвращает выполнение браузера действие по умолчанию. Использовать метод isDefaultPrevented to знаете ли этот метод когда-либо вызывался (на что объект события.)

285

используйте метод stopPropagation:

event.stopPropagation();
30

Не забудьте IE:

if (event.stopPropagation) {    // standard
        event.stopPropagation();
    } else {    // IE6-8
        event.cancelBubble = true;
}
26

Как уже упоминали другие, попробуйте stopPropagation().

и есть второй обработчик, чтобы попробовать: event.cancelBubble = true; это специальный обработчик IE, но он поддерживается по крайней мере в FF. Не очень много знаю об этом, так как я сам не использовал его, но это может стоить того, если все остальное не удастся.

5

при использовании jQuery вам не нужно вызывать функцию stop отдельно..

можно просто return false в обработчике события

это остановит событие и отменит пузырение..

Смотрите также:

событие.метод preventDefault() и возвращать false

из документов jQuery:

5

Это отличный пример для понимания концепции пузырящегося события. Основываясь на приведенных выше ответах, окончательный код будет выглядеть так, как указано ниже. Там, где пользователь нажимает на флажок, распространение события на его родительский элемент "заголовок" будет остановлено с помощью event.stopPropagation();. 

$(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) {
              if (event.stopPropagation) {    // standard
                   event.stopPropagation();
               } else {    // IE6-8
                    event.cancelBubble = true;
               }
          });     
  });
4

кредит @mehras для кода. Я просто создал фрагмент, чтобы продемонстрировать его, потому что я думал, что это будет оценено, и я хотел оправдать эту функцию.

$(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) {
              if (event.stopPropagation) {    // standard
                   event.stopPropagation();
               } else {    // IE6-8
                    event.cancelBubble = true;
               }
          });     
  });
div {
  text-align: center;
  padding: 2em;
  font-size:1.2em
}
.hidden {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="header"><input type="checkbox"/>Checkbox won't bubble the event,
 but this text will.</div>
<div id="container">click() bubbled up!</div>
0

в angularjs это должно работать:

event.preventDefault(); 
event.stopPropagation();
-1