Ich verwende derzeit jQuery, um ein Div anklickbar zu machen, und in diesem Div habe ich auch Anker. Das Problem, auf das ich stoße, ist, dass beim Klicken auf einen Anker beide Klickereignisse ausgelöst werden (für div und anker). Wie verhindere ich, dass das Onclick-Ereignis des Div ausgelöst wird, wenn auf einen Anker geklickt wird?
Hier ist der kaputte Code:
JavaScript
var url = $("#clickable a").attr("href");
$("#clickable").click(function() {
window.location = url;
return true;
})
HTML
<div id="clickable">
<!-- Other content. -->
<a href="http://foo.com">I don't want #clickable to handle this click event.</a>
</div>
quelle
if( e.target !== this) return;
im übergeordneten Element ist besser alse.stopPropagation()
im untergeordneten Element, da Sie nie wissen, ob jemand anderes einen Handler an die untergeordneten Elemente anfügt oder ob eine Bibliothek einen Handler an ein untergeordnetes Element anhängen muss (und Sie nicht mit dem Bibliothekscode herumspielen möchten). Es ist eine bessere Trennung von Bedenken.if( e.target !== this) return;
Scheck in das übergeordnete Element einfügen, wird nichts passiert, wenn auf eines der anderen untergeordneten Elemente dieses übergeordneten Elements geklickt wird, für das keine eigenen onClick-Handler vorhanden sind. Es ist also nutzlos für eine Situation, in der Sie z. B. ein anklickbares übergeordnetes Div haben.e.stopPropagation()
funktioniert aber gut.Verwenden Sie die stopPropagation- Methode (siehe Beispiel):
Wie von jQuery Docs gesagt:
Beachten Sie, dass andere Listener nicht daran gehindert werden, dieses Ereignis zu behandeln (z. B. mehr als ein Klick-Handler für eine Schaltfläche). Wenn dies nicht der gewünschte Effekt ist, müssen Sie ihn
stopImmediatePropagation
stattdessen verwenden.quelle
Hier meine Lösung für alle da draußen, die nach einem Nicht-jQuery-Code suchen (reines Javascript)
Ihr Code wird nicht ausgeführt, wenn Sie auf die Kinder der Eltern klicken
quelle
window.event
, was MDN entmutigt: developer.mozilla.org/en-US/docs/Web/API/Window/event . Wenn Sie Zeit sparen können, würde ich es begrüßen, wenn Sie kommentieren können, warum Sie verwendet habenwindow.event
(möglicherweise handelt es sich um ein Problem, das 2015 bestand, oder ich habe den Grund nicht verstanden).Sie können dies auch versuchen
quelle
Wenn Sie in keinem Fall beabsichtigen, mit dem / den inneren Element (en) zu interagieren, kann eine CSS-Lösung für Sie hilfreich sein.
Stellen Sie einfach die inneren Elemente auf ein
pointer-events: none
in Ihrem Fall:
oder um alle inneren Elemente allgemein anzuvisieren:
Dieser einfache Hack hat mir bei der Entwicklung mit ReactJS viel Zeit gespart
Browser-Unterstützung finden Sie hier: http://caniuse.com/#feat=pointer-events
quelle
Wenn das anklickbare Div mehrere Elemente enthält, sollten Sie Folgendes tun:
quelle
Wenn Sie weiteren Code verwenden
return false;
odere.stopPropogation();
nicht ausführen lassen. Es wird den Fluss an diesem Punkt selbst stoppen.quelle
Schreiben, wenn jemand braucht (für mich gearbeitet):
Aus dieser Lösung.
quelle
Inline-Alternative:
quelle
Hier ist ein Beispiel mit Angular 2+
Wenn Sie beispielsweise eine modale Komponente schließen möchten, wenn der Benutzer außerhalb der Komponente klickt:
quelle
Sie müssen verhindern, dass das Ereignis den Elternteil (den Div) erreicht (sprudelt). Sehen Sie den Teil über sprudelt hier und jQuery-spezifische API info hier .
quelle
quelle
Um ein Unterelement als nicht anklickbar anzugeben, schreiben Sie die CSS-Hierarchie wie im folgenden Beispiel.
In diesem Beispiel stoppe ich die Weitergabe an alle Elemente (*) innerhalb von td innerhalb von tr in einer Tabelle mit der Klasse ".subtable".
quelle
ignoreParent () ist eine reine JavaScript-Lösung.
Es fungiert als Zwischenebene, die die Koordinaten des Mausklicks mit den Koordinaten der untergeordneten Elemente vergleicht. Zwei einfache Implementierungsschritte:
1. Fügen Sie den Code ignoreParent () auf Ihre Seite ein.
2. Anstelle des ursprünglichen onclick = "parentEvent ();" , schreiben:
Sie können IDs beliebig vieler untergeordneter Elemente an die Funktion übergeben und andere ausschließen.
Wenn Sie auf eines der untergeordneten Elemente geklickt haben, wird das übergeordnete Ereignis nicht ausgelöst. Wenn Sie auf übergeordnetes Element geklickt haben, jedoch nicht auf eines der untergeordneten Elemente [als Argumente angegeben], wird das übergeordnete Ereignis ausgelöst.
ignoreParent () Code auf Github
quelle
Wenn es sich um einen Inline-Kontext handelt, versuchen Sie in HTML Folgendes:
quelle
Falls jemand dieses Problem mit React hatte, habe ich es so gelöst.
scss:
Render () der Komponente:
Durch Hinzufügen einer onClick-Funktion für das untergeordnete modale (content div) Mausklickereignis wird verhindert, dass die Funktion 'closeLogin' des übergeordneten Elements erreicht wird.
Dies hat den Trick für mich getan und ich konnte einen Modaleffekt mit 2 einfachen Divs erzeugen.
quelle
a
wie folgt hinzufügen :oder
return false;
vom Klick-Handler für#clickable
wie:quelle
Alle Lösungen sind kompliziert und von jscript. Hier ist die einfachste Version:
quelle
quelle