Wie verhindere ich, dass das Onclick-Ereignis eines Elternteils ausgelöst wird, wenn auf einen untergeordneten Anker geklickt wird?

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>

Ereignisse sprudeln zum höchsten Punkt im DOM, an dem ein Klickereignis angehängt wurde. Selbst wenn Sie in Ihrem Beispiel keine anderen explizit anklickbaren Elemente im div hätten, würde jedes untergeordnete Element des div sein Klickereignis in das DOM sprudeln lassen, bis der Klickereignishandler des DIV es abfängt.

Hierfür gibt es zwei Lösungen: Überprüfen Sie, wer das Ereignis tatsächlich ausgelöst hat. jQuery übergibt ein eventargs-Objekt zusammen mit dem Ereignis:

$("#clickable").click(function(e) {
    var senderElement = e.target;
    // Check if sender is the <div> element e.g.
    // if($(e.target).is("div")) {
    window.location = url;
    return true;
});

Sie können Ihren Links auch einen Klickereignishandler hinzufügen, der sie auffordert, das Sprudeln von Ereignissen zu stoppen, nachdem ihr eigener Handler ausgeführt wurde:

$("#clickable a").click(function(e) {
   // Do something
   e.stopPropagation();
});

Verwenden Sie die stopPropagation- Methode (siehe Beispiel):

$("#clickable a").click(function(e) {
   e.stopPropagation();
});

Wie von jQuery Docs gesagt:

stopPropagation Die Methode verhindert, dass das Ereignis in den DOM-Baum sprudelt, und verhindert, dass übergeordnete Handler über das Ereignis benachrichtigt werden.

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 stopImmediatePropagationstattdessen verwenden.

Hier meine Lösung für alle da draußen, die nach einem Nicht-jQuery-Code suchen (reines Javascript)

document.getElementById("clickable").addEventListener("click", function( e ){
    e = window.event || e; 
    if(this === e.target) {
        // put your code here
    }
});

Ihr Code wird nicht ausgeführt, wenn Sie auf die Kinder der Eltern klicken

Sie können dies auch versuchen

$("#clickable").click(function(event) {
   var senderElementName = event.target.tagName.toLowerCase();
   if(senderElementName === 'div')
   {
       // do something here 
   } 
   else
   {
      //do something with <a> tag
   }
});

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:

.clickable > a {
    pointer-events: none;
}

oder um alle inneren Elemente allgemein anzuvisieren:

.clickable * {
    pointer-events: none;
}

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

Wenn das anklickbare Div mehrere Elemente enthält, sollten Sie Folgendes tun:

$('#clickable *').click(function(e){ e.stopPropagation(); });

Wenn Sie weiteren Code verwenden return false;oder e.stopPropogation();nicht ausführen lassen. Es wird den Fluss an diesem Punkt selbst stoppen.

Schreiben, wenn jemand braucht (für mich gearbeitet):

event.stopImmediatePropagation()

Aus dieser Lösung.

Inline-Alternative:

<div>
    <!-- Other content. -->
    <a onclick='event.stopPropagation();' href="http://foo.com">I don't want #clickable to handle this click event.</a>
</div>

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:

// Close the modal if the document is clicked.

@HostListener('document:click', ['$event'])
public onDocumentClick(event: MouseEvent): void {
  this.closeModal();
}

// Don't close the modal if the modal itself is clicked.

@HostListener('click', ['$event'])
public onClick(event: MouseEvent): void {
  event.stopPropagation();
}

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 .

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".

$(document).ready(function()
{    
   $(".subtable tr td *").click(function (event)
   {
       event.stopPropagation();
   });

});

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:

onclick="ignoreParent(['parentEvent()', 'child-ID']);"

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

Wenn es sich um einen Inline-Kontext handelt, versuchen Sie in HTML Folgendes:

onclick="functionCall();event.stopPropagation();

Falls jemand dieses Problem mit React hatte, habe ich es so gelöst.

scss:

#loginBackdrop {
position: absolute;
width: 100% !important;
height: 100% !important;
top:0px;
left:0px;
z-index: 9; }

#loginFrame {
width: $iFrameWidth;
height: $iFrameHeight;
background-color: $mainColor;
position: fixed;
z-index: 10;
top: 50%;
left: 50%;
margin-top: calc(-1 * #{$iFrameHeight} / 2);
margin-left: calc(-1 * #{$iFrameWidth} / 2);
border: solid 1px grey;
border-radius: 20px;
box-shadow: 0px 0px 90px #545454; }

Render () der Komponente:

render() {
    ...
    return (
        <div id='loginBackdrop' onClick={this.props.closeLogin}>
            <div id='loginFrame' onClick={(e)=>{e.preventDefault();e.stopPropagation()}}>
             ... [modal content] ...
            </div>
        </div>
    )
}

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.

awie folgt hinzufügen :

<a href="http://foo.com" onclick="return false;">....</a>

oder return false;vom Klick-Handler für #clickablewie:

  $("#clickable").click(function() {
        var url = $("#clickable a").attr("href");
        window.location = url;
        return false;
   });

Alle Lösungen sind kompliziert und von jscript. Hier ist die einfachste Version:

var IsChildWindow=false;

function ParentClick()
{
    if(IsChildWindow==true)
    {
        IsChildWindow==false;
        return;
    }
    //do ur work here   
}


function ChildClick()
{
    IsChildWindow=true;
    //Do ur work here    
}

<a onclick="return false;" href="http://foo.com">I want to ignore my parent's onclick event.</a>