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

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

<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;

Ответ 1

заменить

event.preventDefault();
return false;

event.stopPropagation();

event.stopPropagation()

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

event.preventDefault()

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

Ответ 2

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

event.stopPropagation();

Ответ 3

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

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

Ответ 4

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

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

Ответ 5

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

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

Это остановит событие и отменит буксование.

Также смотрите:

event.preventDefault() vs. return false

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

Таким образом, эти обработчики могут препятствовать запуску делегированного обработчика вызовом event.stopPropagation() или возврату false.

Ответ 6

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

Ответ 7

Подтвердите @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>

Ответ 8

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

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