Dokument klicken nicht in Elemente jQuery

Question

Mit jQuery wie erkennt man Klicks nicht auf bestimmte Elemente, und führen Sie eine Aktion konsequent aus?

Ich habe folgendes JavaScript

$('#master').click(function() { 
    $('#slave').toggle(); 
}); 

$(document).not('#master','#slave').click(function() { 
    $('#slave').hide(); 
}); 

und ich kann nicht sehen, wo ich falsch logisch werde. Sie können ein anschauliches Beispiel here

Answer 1

sehen Da Sie auf das click Ereignis auf dem Dokument sind verbindlich, Sie event.target verwenden können, um das Element zu erhalten, das das Ereignis ausgelöst:

$(document).click(function(event) { 
    if (!$(event.target).is("#master, #slave")) { 
     $("#slave").hide(); 
    } 
}); 

EDIT: Als Mattias weist rechtmäßig in seinem Kommentar darauf hin, dass der obige Code keine Klickereignisse identifizieren kann, die von den Nachkommen von #master und #slave stammen (falls vorhanden). In dieser Situation können Sie closest() verwenden die Veranstaltungs-Ziel zu überprüfen:

$(document).click(function(event) { 
    if (!$(event.target).closest("#master, #slave").length) { 
     $("#slave").hide(); 
    } 
}); 

Answer 2

macht dieser Code, was Sie wollen? (Nicht ganz sicher, ob ich das richtig verstanden)

$('body').on('click', '*:not(#master, #slave)', function() { 
    $('#slave').hide(); 
}); 

http://jsfiddle.net/gZ4Hz/8/

Answer 3

Ein anderer Gedanke, kann es nicht funktioniert, weil Ihr Browser nicht body auf 100% Höhe Rendering werden kann; Versuchen Sie, Ihre Basis CSS zu korrigieren Körpergröße und dann ein paar andere Gedanken.

e.stopPropagation(): Verhindert, dass das Ereignis die DOM-Struktur aufblubbelt und verhindert, dass alle übergeordneten Handler über das Ereignis benachrichtigt werden.

Also, wenn Sie den ersten Klick ändern Code auf die folgenden:

$('#master').click(function(e) { 
    e.stopPropagation(); 
    $('#slave').toggle(); 
}); 

Auch dann könnte man das Rufzeichen des zweiten ändern:

$("body, body *").not('#master, #slave').click(function(e) { 
    $('#slave').hide(); 
}); 

Und das sollte es abdecken. Versuche es! oder siehe this jsFiddle

Answer 4

Die Ereignisdelegierung wurde seit langem von jQuery nativ unterstützt. Die Schwierigkeit besteht darin, den entsprechenden Selektor zu erstellen. Ursprünglich wurde delegate verwendet, aber in jüngerer Zeit sollte die Delegiertenform von on verwendet werden.

Zweck der Ereignisdelegierung ist das Abhören von Ereignissen in untergeordneten Elementen und das Aufrufen der gebundenen Ereignisbehandlungsroutinen für diese Elemente, als ob sie an das untergeordnete Element statt an das übergeordnete Element gebunden wären. Dies bedeutet, dass anstelle des Bindens von Handlern an jedes -Element im DOM ein Handler an jedes Element in der ursprünglichen Auswahl gebunden wird (document ist ein einzelnes Element).Dies macht auch für eine einfache Möglichkeit, einen einzelnen Wähler zu verwenden, um einem sich ständig verändernden Satz von Elementen zu binden, als neue Elemente ihre Veranstaltungen zu document ausbreitet, ob sie bestanden, wenn die anfängliche Ereignishandler gebunden wurde:

$(document).on('click', '*:not(#master, #master *, #slave, #slave *)', function (e) { 
    //this will reference the clicked element 
}); 

Beachten Sie außerdem, dass ich nicht nur gesagt habe, dass die Elemente nicht #master oder #slave sein müssen, sie müssen nicht Kinder von #master oder #slave sein.

Answer 5

Fredriks Antworten funktionieren für Elemente, die bereits im Dokument vorhanden sind, aber es funktionierte nicht für Elemente, die von Ajax-Aufrufen abgerufen wurden. Ich habe folgendes versucht und es funktioniert für mich. Den Code für zukünftige Ajax-Programmierer freigeben.

$(document).on('click',function(event) { 
     if (!$(event.target).closest("#selector").length) { 
      if ($('#selector').is(":visible")) 
       $('#selector').slideUp(); 
     } 
    }); 

Ich hätte es als Kommentar gepostet, aber ich habe nicht genug Ruf dafür.