Как остановить событие bubbling on флажок нажмите

у меня есть флажок, который я хочу выполнить некоторое действие 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 ответов


заменить

event.preventDefault();
return false;

С

event.stopPropagation();

событие.это происходит()

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

событие.preventDefault ()

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


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

event.stopPropagation();

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

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

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

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


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

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

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

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

событие.preventDefault () против return false

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

эти обработчики могут препятствовать запуску делегированного обработчика путем вызова события.stopPropagation () или возвращение ложный.

это отличный пример для понимания концепции пузырящегося события. Основываясь на приведенных выше ответах, окончательный код будет выглядеть так, как указано ниже. Когда пользователь нажимает на флажок, распространение события на его родительский элемент "header" будет остановлено с помощью 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;
               }
          });     
  });

кредит @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>

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

event.preventDefault(); 
event.stopPropagation();