Дважды нажатие кнопки Jquery вызывает щелчок по ярлыку html.

У меня есть контейнер div, который содержит html флажок и его ярлык. Используя jquery, я хотел вызвать событие click, когда кто-то нажимает на метку в этом контейнере.

Я вижу, что событие jquery click срабатывает дважды, когда я нажимаю на метку!

Для целей тестирования я активировал событие click на флажке вместо метки, и здесь триггеры события щелчка мыши только один раз, как и должно быть.

Вот скрипка. http://jsfiddle.net/AnNvJ/2/

  
   

Jquery

 $(document).ready(function () { $('#test label').live('click', function (event) { alert('clicked'); }); $('#test checkbox').live('click', function (event) { alert('clicked'); }); }); 

8 Solutions collect form web for “Дважды нажатие кнопки Jquery вызывает щелчок по ярлыку html.”

Один из $('#test checkbox') никогда не вызывается, потому что у вас нет checkbox с именем.

И в зависимости, если вы нажмете на флажок или метку, обратный вызов для $('#test label') вызывается один или два раза из-за барботажа, потому что элемент ввода является частью метки и является одним объединением и поэтому также получил событие если метка event.stopPropagation() не event.stopPropagation() , вы не можете делать event.stopPropagation() ).

Вы можете проверить это, если вы измените код таким образом:

  $('#test label').live('click', function (event) { event.stopPropagation(); //< -- has no effect to the described behavior console.log(event.target.tagName); }); 

Нажмите на ярлык:

МЕТКА
ВХОД

Нажмите на вход:

ВХОД

РЕДАКТИРОВАТЬ Если вы хотите обработать щелчок на label а не флажок, - и вы не можете изменить структуру HTML - вы можете просто проигнорировать событие элемента input .

Либо так:

 $('#test label').live('click', function (event) { if( event.target.tagName === "LABEL" ) { alert('clicked'); } }); 

Или с помощью jQuery для тестирования:

 $('#test label').live('click', function (event) { if( $(event.target).is("label") ) { alert('clicked'); } }); 

Это связано с тем, что вы помещаете ввод внутри метки, поэтому, когда вы нажимаете на флажок, вы также щелкаете каждого родителя (это называется «пузыриться») EDIT, кредит на @ t.niese: на самом деле здесь нет пузырей, потому что проблема заключается в том, что вы нажимаете на метку и он только пузырится вверх.

Чтобы предотвратить событие двойного щелчка, но также установите флажок, который вы можете использовать:

 $(document).ready(function () { $('#test label').on('click', function (event) { event.preventDefault(); var $check = $(':checkbox', this); $check.prop('checked', !$check.prop('checked')); alert('clicked label'); }); $('#test :checkbox').on('click', function (event) { event.stopPropagation(); alert('clicked checkbox'); }); }); 

FIDDLE

Также предпочитайте использовать $.on и обратите внимание на использование :checkbox selector или [type="checkbox"] который согласно JQuery API быстрее и более совместим ( селектора атрибутов )

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

OP обнаружило одно решение, позволяющее обработчику события click для ярлыка получать выполнение дважды за один клик. Выбранный ответ также имеет хорошее решение, но он неправильно утверждает, что это не имеет ничего общего с пузырьками событий.

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

Нажатие на метку, связанную с вводом, вызывает два события щелчка. Первое событие щелчка запускается для метки. Обработка по умолчанию этого события щелчка вызывает событие второго клика, которое будет вызвано для соответствующего входа. Если вход является потомком метки, второе событие щелчка пузырится до метки. Поэтому обработчик события click для метки вызывается дважды.


Поэтому одним из способов решения этой проблемы (как обнаружено OP) является не размещение ввода внутри элемента метки. Там все еще будут два события щелчка, но второе событие клика не будет пузыриться со входа на метку.

Когда вход не находится внутри метки, атрибут «для» метки может использоваться для связывания метки с вводом. Атрибут «для» должен быть установлен на значение «id» для ввода.

   

Другим решением было бы остановить событие от пузырьков от входа:

 $('#test :checkbox').on('click', function(event) { event.stopPropagation(); }); $('#test label').on('click', function() { alert('clicked'); }); 

Тогда есть решение, представленное в выбранном ответе, в котором должен быть обработчик щелчка ярлыка, игнорируя событие, когда он пузырится от входа. Я предпочитаю писать так:

 $('#test label').on('click', function(event) { if (event.target == this) { alert('clicked'); } }); 

Вы ДОЛЖНЫ использовать preventDefault в своем ярлыке и stopPropagation в своем флажке:

http://jsfiddle.net/uUZyn/5/

Код:

 $(document).ready(function () { $('#test label').on('click', function (event) { event.preventDefault(); alert('clicked label'); var ele = $(this).find('input'); if(ele.is(':checked')){ ele.prop('checked', false); }else{ ele.prop('checked', true); } }); $('#test :checkbox').on('click', function (event) { event.stopPropagation(); alert('clicked checkbox'); }); }); 

Таким образом, вы избегаете поведения @ t.niese.

Спасибо предыдущим ответам, я бы не понял их без них: D.

Обновить

Как указывает t.niese, вот ответ, который я обновил с поведением:

http://jsfiddle.net/uUZyn/6/

Просто добавьте поведение проверки после использования preventDefault XD

Я просто столкнулся с той же проблемой, когда щелчок на ярлыке вызывал два отдельных события щелчка. Я смог решить проблему самостоятельно, добавив атрибут name во вход и атрибут для метки.

Например:

 

Нет необходимости в JavaScript.

Это происходит в основном, когда вы вызываете «щелчок» для элемента X, имеющего дочерний элемент Y, и когда пользователь нажимает на Y.

Событие, пузырящееся от элемента с кликом, является нежелательным событием, которое вам не нужно.

У вас есть два варианта избежать этого двойного запуска …

1) Используйте $ (‘selector’). TriggerHandler (‘any_standard_event_name’) – Здесь стандартным событием я имею в виду «щелчок», «изменение», «зависание» и т. Д. (Я никогда не пробовал эту опцию)

2) Использовать имя настраиваемого события. например. . $ ( ‘Селектор’) триггер ( ‘my.click’);

Подробнее о http://api.jquery.com/trigger/

Что касается моего случая и того факта, что я использую md-кнопку для материального дизайна, приведенные выше предложения не очень хорошо работают, потому что это значительно сократило площадь области, получающей отпечаток пальца на моем андроиде. Не говоря уже о том, что вместо двух имен тегов я иногда получаю 3 раза (BUTTON, SPAN или MD-ICON). Кроме того, предложение в другом месте в Интернете изменить мою версию Арии тоже не помогло. В итоге я обнаружил, что проблема заключалась в том, что я загружал jquery до angular.js, даже если ng-infinate-scroll справляется с документом, чтобы сначала загрузить jquery. Во всяком случае, если бы я попытался загрузить jquery после того, как угловой ng-infinate-scroll перестанет работать. Поэтому я загрузил последнюю версию ng-infinate-scroll (нестабильной версии) версии 1.2.0, и теперь я могу загрузить мой jquery после angular.js, а моя бесконечная прокрутка работает со всеми проблемами, которые у меня были с несколькими стрельбой ng-click прошло.

Мои элементы также обернули друг друга.

Поэтому я использовал простой трюк CSS для этого решения:

 .off{ pointer-events:none; } 
  • Вызов jQuery Ajax Request Каждый X минут
  • Как работает jQuery .data ()?
  • отключить гиперссылку с помощью jQuery
  • Как я могу создать jQuery UI 'draggable ()' div, перетаскиваемый для сенсорного экрана?
  • Bind jQuery UI автозаполнения с использованием .live ()
  • загрузить json в переменную
  • Как я могу сохранить bootstrap popover вживую, пока popover завис?
  • Обновить Угловую модель после установки входного значения с помощью jQuery
  • Сравнение использования памяти в браузере: встроенный onClick против использования JQuery .bind ()
  • Можно ли удалить встроенные стили с помощью jQuery?
  • Как получить ширину экрана без (минус) полосы прокрутки?
  • Давайте будем гением компьютера.