Der Noob-Weg, es zu tun, wäre meiner Meinung nach
$('*').click(function(){...});
Aber gibt es eine Möglichkeit, jede Art von Klick abzufangen, ohne einen Listener für jedes Objekt im DOM registrieren zu müssen?
Hilfe wäre toll. =)
Fangen Sie jeden Klick ab, der mit jQuery ausgeführt wird
Lesezeit: 3 Minuten
11764600cookie-checkFangen Sie jeden Klick ab, der mit jQuery ausgeführt wird
RadiantHex
EIN click Ereignis wird standardmäßig Blasen Sie das DOM aufalso kannst du einfach a anhängen click Handler an die Wurzel, wie folgt:
$(document).click(function() {
//do something
});
Es sei denn, ein Handler auf einem Element auf dem Weg tut dies event.stopPropagation() oder return falseSie erhalten den Klick hier.
-
+1, habe das gerade geschrieben. Dies setzt voraus, dass keine anderen Click-Handler die Bubbling-Verwendung abbrechen
event.stopPropagation()Natürlich.– Andi E
18. Juli 2010 um 21:50 Uhr
-
Die event.stopPropagation() war sehr nützlich zu wissen! Danke, dass du das aufgenommen hast
– RadiantHex
18. Juli 2010 um 22:03 Uhr
-
@Andy – +1 – Wichtiger Punkt, habe das hinzugefügt, während du kommentiert hast 🙂
– Nick Craver
18. Juli 2010 um 22:16 Uhr
Vinzenz Robert
Sie können die Ereignisdelegierung für das Dokument verwenden, um alle Klicks zu erfassen.
jQuery füllt die target Eigentum der event um das angeklickte Element abzurufen.
$(document).click(function(event){
// event.target is the clicked object
});
Beachten Sie, dass event.target wird das am tiefsten angeklickte Element sein. Bsp.: wenn es eine gibt <span> in einem <a>Sie erhalten die <span>nicht der <a>.
Wenn Sie einen beliebigen Klick abfangen, aber ein bestimmtes Element (wie eine Klasse) abrufen möchten, können Sie Folgendes tun:
$(document).click(function(event){
$(event.target).closest(".clickable").each(function(){
// "this" is your "clickable" clicked
});
});
Es sei denn, ein Ereignishandler für ein Element auf dem Weg dorthin führt eine aus event.stopPropagation() oder return falseSie erhalten den Klick hier.
-
Danke, das ist eine erstaunliche Antwort, danke, dass Sie Informationen aufgenommen haben, die nicht notwendig waren, aber SEHR nützlich! Wenn Sie auch die Tatsache “event.stopPropagation()” hinzufügen könnten, würde ich diese Antwort gerne ankreuzen =D
– RadiantHex
18. Juli 2010 um 22:00 Uhr
-
Ich glaube
.closest()gibt nur ein übergeordnetes Objekt zurück, also using.each()wäre unnötig.– Mottie
18. Juli 2010 um 22:12 Uhr
-
@fudgey – Das würde zum Beispiel von der Verwendung abhängen
$(this).plugin({ option: this.id });konnte nicht angekettet werden (thiswäre das falsche Element), lebt aber in der.each()Verschluss schön.– Nick Craver
18. Juli 2010 um 22:38 Uhr
-
@fudgey
.closest()kann tatsächlich eine leere jQuery zurückgeben, also using.each()ist eine Verknüpfung zur Verwendung von anifum die Existenz des Rückgabewerts zu testen– Vinzenz Robert
19. Juli 2010 um 14:40 Uhr
-
Und wenn Sie das Ereignis stoppen möchten, wenn der Klick auf ein bestimmtes Element erfolgt:
if ($(event.target).closest('#myElement').length > 0 ) { event.stopPropagation(); }– Karns
13. Januar 2015 um 3:38 Uhr
Wie wäre es mit:
$('body').click(function(){...});
Jeder Klick erfolgt auf den Körper, da dieser der übergeordnete Knoten aller sichtbaren Knoten im Dom ist.
-
sieht aus wie in jQuery 3
.click(function(){...});veraltet ist, müssen Sie verwenden$(document).on('click', 'body', function(){});– Szekelygobe
15. November 2019 um 0:17 Uhr
Wie wäre es, wenn Sie einfach einen Klick am Körper anbringen?
$('body').click(function(e){ ... })
Das e.target sollte enthalten, worauf geklickt wurde
$('*').click( function() {...} ) fängt nur Klicks auf Elemente ab, die zum Zeitpunkt des Aufrufs vorhanden waren .click(). Um Klicks auf Elemente abzufangen, die später erstellt werden können, müssen Sie sich an sie binden body oder document wie andere vorgeschlagen haben.
-
Danke für dieses zusätzliche Wissen, sehr wertvoll.
– RadiantHex
18. Juli 2010 um 22:16 Uhr
-
Beachten Sie, dass dies den Click-Event-Handler an jedes Element in Ihrem DOM bindet, was mehr Speicher verbraucht und mehr CPU erfordert, wenn die Seite ausgeführt wird.
– Vinzenz Robert
14. Februar 2016 um 10:03 Uhr
-
Danke für dieses zusätzliche Wissen, sehr wertvoll.
– RadiantHex
18. Juli 2010 um 22:16 Uhr
-
Beachten Sie, dass dies den Click-Event-Handler an jedes Element in Ihrem DOM bindet, was mehr Speicher verbraucht und mehr CPU erfordert, wenn die Seite ausgeführt wird.
– Vinzenz Robert
14. Februar 2016 um 10:03 Uhr
