wake-up-neo.net

Wie kann ich verhindern, dass das Onclick-Ereignis eines übergeordneten Elements 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 das Div und den Anker). Wie kann ich verhindern, dass das Onclick-Ereignis des Div ausgelöst wird, wenn auf einen Anker geklickt wird?

Hier ist der fehlerhafte 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>
274
Jonathon Watney

Ereignisblase 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 hatten, würde jedes untergeordnete Element des div das Click-Ereignis im DOM aufblasen, bis der Click-Ereignishandler des DIV das Ereignis erfasst.

Es gibt zwei Lösungen, um zu überprüfen, 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 auch einen Click-Event-Handler an Ihre Links anhängen, der sie dazu auffordert, stop event bubbling zu stoppen, nachdem ihr eigener Handler ausgeführt wurde:

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

Verwenden Sie die stopPropagation -Methode, siehe ein Beispiel:

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

Wie von jQuery Docs gesagt:

Die stopPropagation-Methode verhindert, dass das Ereignis das DOM sprudelt Baum, um zu verhindern, dass übergeordnete Handler über das Ereignis benachrichtigt werden.

Beachten Sie, dass es / nicht verhindert, dass andere Listener mit diesem Ereignis umgehen (z. B. mehr als ein Klick-Handler für eine Schaltfläche). Wenn dies nicht der gewünschte Effekt ist, müssen Sie stattdessen stopImmediatePropagation verwenden.

90
Cleiton

Hier meine Lösung für alle, die einen 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 Childs der Eltern klicken

40
Sabaz

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
   }
});
13
Rashad Annara

Wenn Sie auf keinen Fall mit dem/den inneren Element (en) interagieren möchten, kann eine CSS-Lösung für Sie hilfreich sein.

Setzen Sie das innere Element/die inneren Elemente auf pointer-events: none.

in Ihrem Fall:

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

oder generell alle inneren Elemente ansprechen:

.clickable * {
    pointer-events: none;
}

Dieser einfache Hack hat mir beim Entwickeln mit ReactJS viel Zeit gespart

Browser-Unterstützung finden Sie hier: http://caniuse.com/#feat=pointer-events

10
Hooman Askari

Die Verwendung von return false; oder e.stopPropogation(); lässt keinen weiteren Code zur Ausführung zu. An diesem Punkt wird der Fluss anhalten.

8
Imamudin Naseem

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

$('#clickable *').click(function(e){ e.stopPropagation(); });
7
Ivan Ivković

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

event.stopImmediatePropagation()

Von dieser Lösung.

5

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();
}
3
Steve Brush

Sie müssen das Ereignis davon abhalten, das übergeordnete Element (das div) zu erreichen (zu sprudeln) . Siehe den Abschnitt über das Sprudeln here und die jQuery-spezifische API-Info hier .

1
Matt Ball

var inner = document.querySelector("#inner");
var outer = document.querySelector("#outer");
inner.addEventListener('click',innerFunction);
outer.addEventListener('click',outerFunction);

function innerFunction(event){
  event.stopPropagation();
  console.log("Inner Functiuon");
}

function outerFunction(event){
  console.log("Outer Functiuon");
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Pramod Kharade-Event with Outer and Inner Progration</title>
</head>
<body>
<div id="outer" style="width:100px;height:100px;background-color:green;">
  <div id="inner" style="width:35px;height:35px;background-color:yellow;"></div>
</div>
</body>
</html>

1
Pramod Kharade

ignoreParent () ist eine reine JavaScript-Lösung.

Es fungiert als Zwischenebene, die die Koordinaten des Mausklicks mit den Koordinaten des untergeordneten Elements/der untergeordneten Elemente vergleicht. Zwei einfache Implementierungsschritte:

1. Fügen Sie den ignoreParent () Code in Ihre Seite ein.

2. Anstelle des Originals des Elternteils onclick = "parentEvent ();" , schreibe:

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

Sie können IDs einer beliebigen Anzahl von untergeordneten Elementen 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 ein übergeordnetes Element geklickt haben, jedoch keines der untergeordneten Elemente [als Argument angegeben], wird das übergeordnete Ereignis ausgelöst.

ignoreParent () Code auf Github

0
Fom

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>
0
Matt Wyeth

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; }

Komponente render ():

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

Durch das Hinzufügen einer OnClick-Funktion für untergeordnete modale (Content Div) -Klick-Ereignisse wird verhindert, dass die 'closeLogin'-Funktion des übergeordneten Elements erreicht wird.

Dies hat den Trick für mich gemacht und ich konnte mit 2 einfachen Divs einen modalen Effekt erzeugen. 

0
Claudio

Um ein Unterelement als nicht anklickbar festzulegen, schreiben Sie die CSS-Hierarchie wie im folgenden Beispiel.

In diesem Beispiel stoppe ich die Weitergabe an beliebige Elemente (*) innerhalb von td innerhalb von tr innerhalb einer Tabelle mit der Klasse ".subtable".

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

});
0
user3202819