JQuery на событие щелчка происходит несколько раз

Question

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

<script> 
    var tonks = 1; 
    $(document).ready(function(){ 
     $(".navbar").css("zIndex", 2); 
     $("*").unbind('click').click(function (e) { 
      if(tonks == 1) { 
       $(".navbar").slideUp(); 
       $(".overlay").fadeOut(); 
       tonks = 0; 
      } 
      else { 
       $(".navbar").slideDown(); 
       $(".overlay").fadeIn(); 
       tonks = 1; 
      }  
     }); 
    }); 
</script> 

Но из-за какой-то причине, элементы появляются и исчезают 3 раза за клик.
Я читал похожие вопросы по этой проблеме, но все они, похоже, связаны с сложными событиями при щелчке, тогда как мой действительно простой код. Я попытался использовать unbind перед вызовом, но это не сработало. Любые предложения?

Answer 1

Вы столкнулись с проблемой пузырения событий. Когда вы используете $("*"), он связывает событие с каждым элементом, и когда вы нажимаете на какой-либо дочерний элемент, он также запускает событие для родителей. Используйте $(document).click вместо $("*").unbind('click').click, как показано ниже.

$(document).click(function (e) { 
    // do your stuff here 
}) 

Answer 2

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

Answer 3

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

Ваше событие пузырится до родителя целевого элемента, а затем следующего родителя и так далее, пока он не достигнет вершины вашего DOM.

$("*") // Don't use this 

Вместо этого, если вы сосредоточились на одном узле, вы получите только одно событие.

$(document) // Use this instead 

Кроме того, JQuery события в пространстве имен - так 'нажмите кнопку' не так желательно, как 'click.namespace'. Позволь мне показать тебе.

HTML: Я создаю два набора, чтобы играть с

<div id="1" class="one"></div> 
<div id="2" class="one"></div> 
<div id="3" class="one"></div> 
<div id="4" class="two"></div> 
<div id="5" class="two"></div> 
<div id="6" class="two"></div> 

CSS: Некоторые брызгает, чтобы мы могли иметь некоторые действительно основной стиль происходит - для того, чтобы увидеть что-то происходит

div {width:100px;height:100px;margin:10px;background:red;float:left;} 

.blue { background: blue;} 
.green {background: green;} 

jQuery: Я привязал некоторые функции через bind, а затем снова отсоединил их, используя unbind.

// Here we make two groups to play with 
var one = $('.one'); 
var two = $('.two'); 

// Use named functions for better readability - try to avoid anonymous function 
// directly attached from within your "bind". Better still use external functions 
// to be more DRY - as show here 

// This will toggle blue on group one 
function addblue() { 
    $(one).toggleClass('blue'); 
} 

// This will toggle green on group two 
function addgreen() { 
    $(two).toggleClass('green'); 
} 

// Now we can call them against our bind function 
// Noticed that I've namespaced them - which is better than 
// listening to all of a given event 
$(document).bind('click.blue', addblue); 
$(document).bind('click.green', addgreen); 

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

// This would unbind all click handlers 
// We would only do this when we're sure we want to unbind all of them 
$(document).unbind('click'); 

// This would unbind all click handlers on green 
$(document).unbind('click.green'); 

// This would unbind all click handlers on blue 
$(document).unbind('click.blue'); 

// We can go one better and unbind a namespace and capture all events within it 
// Which means we'd unbind 'click', 'mouseover', 'custom' and so on. 
$(document).unbind('.green'); 

Вот рабочий jsFiddle, чтобы ты: https://jsfiddle.net/likestothink/me2992p5/