Ich benutze diesen Code:
$('body').click(function() {
$('.form_wrapper').hide();
});
$('.form_wrapper').click(function(event){
event.stopPropagation();
});
Und dieser HTML :
<div class="form_wrapper">
<a class="agree" href="javascript:;">I Agree</a>
<a class="disagree" href="javascript:;">Disagree</a>
</div>
Das Problem ist, dass ich Links innerhalb der habe div
und wenn sie beim Klicken nicht mehr funktionieren.
$('html')
oder$(document)
wäre besser als$('body')
Antworten:
Hatte das gleiche Problem, kam mit dieser einfachen Lösung. Es funktioniert sogar rekursiv:
quelle
$("YOUR CONTAINER SELECTOR").unbind( 'click', clickDocument );
nur neben zu verwenden.hide()
. Sodocument
halten Sie nicht für Klicks zu hören.$(document).on("mouseup.hideDocClick", function () { ... });
in der Funktion, die den Container öffnet, und in der Funktion$(document).off('.hideDocClick');
zum Ausblenden geschrieben. Verwenden von Namespaces Ich entferne keine anderen möglichenmouseup
Listener, die an das Dokument angehängt sind.Du solltest besser so etwas machen:
quelle
hover
Event-Handler, der viele Möglichkeiten eröffnet.(function() { // ... code })();
Ich erinnere mich nicht an den Namen dieses Musters, aber es ist super nützlich! Alle Ihre deklarierten Variablen befinden sich in der Funktion und verschmutzen den globalen Namespace nicht.Dieser Code erkennt jedes Klickereignis auf der Seite und blendet das
#CONTAINER
Element nur dann aus, wenn das angeklickte Element weder das#CONTAINER
Element noch einer seiner Nachkommen war.quelle
Möglicherweise möchten Sie das Ziel des Klickereignisses überprüfen, das für den Body ausgelöst wird, anstatt sich auf stopPropagation zu verlassen.
Etwas wie:
Außerdem enthält das Körperelement möglicherweise nicht den gesamten visuellen Bereich, der im Browser angezeigt wird. Wenn Sie feststellen, dass Ihre Klicks nicht registriert werden, müssen Sie möglicherweise stattdessen den Klick-Handler für das HTML-Element hinzufügen.
quelle
e.stopPropagation();
Sie nicht, wenn Sie andere Klick-Listener habenform_wrapper
wenn Sie auf eines seiner untergeordneten Elemente klicken, was nicht das gewünschte Verhalten ist. Verwenden Sie stattdessen die Antwort von prc322.Live DEMO
Überprüfen Sie, ob sich der Klickbereich nicht im Zielelement oder in seinem untergeordneten Element befindet
AKTUALISIEREN:
jQuery Stop Propagation ist die beste Lösung
Live DEMO
quelle
clicked
. AndernfallsstopPropagation
würde es möglich sein, dass mehrere Dropdowns gleichzeitig geöffnet sind.quelle
Die Lösung wurde aktualisiert auf:
var mouseOverActiveElement = false;
quelle
.live
ist jetzt veraltet ; Verwenden Sie.on
stattdessen.Eine Lösung ohne jQuery für die beliebteste Antwort :
MDN: https://developer.mozilla.org/en/docs/Web/API/Node/contains
quelle
bind
da funktioniert nicht Könnten Sie die Funktion korrigieren, damit sie funktioniert?Live-Demo mit ESCFunktionalität
Funktioniert sowohl auf dem Desktop als auch auf dem Handy
Wenn Sie in einigen Fällen sicherstellen müssen, dass Ihr Element wirklich sichtbar ist, wenn Sie auf das Dokument klicken:
if($pop.is(':visible') && (notH||e.which==27)) $pop.hide();
quelle
Würde so etwas nicht funktionieren?
oder
quelle
.form_wrapper
beim Klicken auf die untergeordneten Elemente (unter anderem) ausgeblendet.Noch schlanker:
quelle
.wrapper
ausgeblendet, egal wo Sie auf die Seite klicken, was nicht gewünscht wurde.Anstatt jeden einzelnen Klick auf das DOM anzuhören, um ein bestimmtes Element auszublenden, können Sie
tabindex
das übergeordnete Element festlegen<div>
und diefocusout
Ereignisse anhören .Durch die Einstellung
tabindex
wird sichergestellt, dass dasblur
Ereignis auf dem ausgelöst wird<div>
(normalerweise nicht).Ihr HTML würde also so aussehen:
Und dein JS:
quelle
Und für Touch-Geräte wie IPAD und IPHONE können wir folgenden Code verwenden
quelle
Hier ist eine jsfiddle, die ich in einem anderen Thread gefunden habe und die auch mit dem Esc-Schlüssel funktioniert: http://jsfiddle.net/S5ftb/404
quelle
Erbaut aus der fantastischen Antwort von prc322.
Dies fügt ein paar Dinge hinzu ...
Ich hoffe das hilft jemandem!
quelle
Wenn Sie Probleme mit iOS haben, funktioniert mouseup auf einem Apple-Gerät nicht.
funktioniert mousedown / mouseup in jquery für das ipad?
ich benutze das:
quelle
(Nur zur Antwort von prc322 hinzufügen.)
In meinem Fall verwende ich diesen Code, um ein Navigationsmenü auszublenden, das angezeigt wird, wenn der Benutzer auf eine entsprechende Registerkarte klickt. Ich fand es nützlich, eine zusätzliche Bedingung hinzuzufügen, dass das Ziel des Klicks außerhalb des Containers kein Link ist.
Dies liegt daran, dass einige der Links auf meiner Website der Seite neuen Inhalt hinzufügen. Wenn dieser neue Inhalt gleichzeitig mit dem Verschwinden des Navigationsmenüs hinzugefügt wird, kann dies für den Benutzer verwirrend sein.
quelle
So viele Antworten müssen ein Durchgangsrecht sein, um eine hinzugefügt zu haben ... Ich habe keine aktuellen (jQuery 3.1.1) Antworten gesehen - also:
quelle
quelle
p
ist der Elementname. Wo man auch die ID oder den Klassen- oder Elementnamen übergeben kann.quelle
Geben Sie false zurück, wenn Sie auf .form_wrapper klicken:
quelle
Fügen Sie ein Klickereignis an Elemente der obersten Ebene außerhalb des Formular-Wrappers hinzu, z. B.:
Dies funktioniert auch auf Touch-Geräten. Stellen Sie jedoch sicher, dass Sie kein übergeordnetes Element von .form_wrapper in Ihre Auswahlliste aufnehmen.
quelle
GEIGE
quelle
quelle
Kopiert von https://sdtuts.com/click-on-not-specified-element/
Live-Demo http://demos.sdtuts.com/click-on-specified-element
quelle
Ich habe es so gemacht:
quelle
quelle
Mit diesem Code können Sie so viele Elemente ausblenden, wie Sie möchten
quelle
Sie können ein Klickereignis an das Dokument binden, das die Dropdown-Liste ausblendet, wenn auf etwas außerhalb der Dropdown-Liste geklickt wird. Es wird jedoch nicht ausgeblendet, wenn auf etwas innerhalb der Dropdown-Liste geklickt wird zeigt das Dropdown)
Binden Sie dann beim Ausblenden das Klickereignis auf
quelle
Nach der docs ,
.blur()
arbeitet für mehr als den<input>
Tag. Zum Beispiel:quelle
div
nie verwischt - Unschärfeereignisse können nicht einmal von ihren Kindern zu ihnen sprudeln. Selbst wenn das oben Gesagte nicht zutrifft, würde dies nur funktionieren, wenn Sie sicherstellen, dass das.form_wrapper
im Fokus ist, bevor der Benutzer darauf klickt.