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

183

У меня есть флажок, который я хочу выполнить 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;
roryf
источник
2
Я нашел статью по этому вопросу, которая может быть полезна для других переполнений стека. Совет: нажмите Строка таблицы, чтобы активировать флажок. Нажмите
Педер Райс

Ответы:

341

замещать

event.preventDefault();
return false;

с участием

event.stopPropagation();

event.stopPropagation ()

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

event.preventDefault ()

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

Рахул
источник
4
по какой-то причине это не сработало для меня, но вернул false сделал.
Рэнди Л
3
Если вы связываете событие, используя .live()метод, это не будет работать. Вам придется использовать return false;себя.
Рахул
2
Это работает с использованием .on()метода jQuery (live теперь не рекомендуется). Я не мог понять, почему возвращение false не работает.
Styfle
Я потратил довольно много времени, чтобы выяснить, что event.preventDefault () не показывал галочку в IE8, но хорошо работал в других браузерах. Я нашел этот ответ после того, как исправил, а затем прибегнул к поиску по Google.
Signonsridhar
не сработало для .. но эти две строки сработали (без возврата false) -> event.preventDefault (); event.stopPropagation ();
Куган Кумар
32

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

event.stopPropagation();
Патрис Нефф
источник
29

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

if (event.stopPropagation) {    // standard
        event.stopPropagation();
    } else {    // IE6-8
        event.cancelBubble = true;
}
Фараз Келини
источник
24
Этот ответ с 2012 года. В 2015 году, пожалуйста, забудьте IE.
Тайлан
8
Это относится и к IE9. Мой тестовый компьютер IE9 задыхается от stopPropagation (), но любит cancelBubble (). К сожалению, некоторые люди / организации все еще используют IE9 в 2016 году. Те из нас, у кого есть корпоративные клиенты, не могут это игнорировать.
Крис Кобер
я люблю ie5 в 2019 году
SuperUberDuper
5

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

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

peirix
источник
5

Это отличный пример для понимания концепции всплытия событий. Исходя из приведенных выше ответов, окончательный код будет выглядеть так, как указано ниже. Когда пользователь нажимает на флажок, распространение события на его родительский элемент '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
источник
5

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

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

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

Также смотрите event.preventDefault () против возврата false

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

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

DutchKevv
источник
1

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

user2503764
источник
Код, который фактически показывает, как использовать переменную события, спасибо.
Моше Биниели
-1

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

event.preventDefault(); 
event.stopPropagation();
Куган Кумар
источник