Come posso evitare che l'evento onclick di un genitore venga generato quando si fa clic su un'ancora figlio?

Attualmente sto usando jQuery per rendere selezionabile un div e in questo div ho anche delle ancore. Il problema in cui mi imbatto è che quando faccio clic su un'ancora vengono attivati ​​entrambi gli eventi clic (per il div e l'ancora). Come posso evitare che l'evento onclick del div si attivi quando si fa clic su un'ancora?

Ecco il codice rotto:

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>

Gli eventi si spostano nel punto più alto del DOM in cui è stato associato un evento clic. Quindi, nel tuo esempio, anche se non ci fossero altri elementi esplicitamente cliccabili nel div, ogni elemento figlio del div farebbe il loro evento click nel DOM fino a quando il gestore di eventi click del DIV lo catturerà.

Esistono due soluzioni per verificare chi ha effettivamente generato l'evento. jQuery passa un oggetto eventargs insieme all'evento:

$("#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;
});

Puoi anche collegare un gestore di eventi click ai tuoi link che dicono loro di interrompere il gorgoglio degli eventi dopo l'esecuzione del loro gestore:

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

Usa il metodo stopPropagation , vedi un esempio:

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

Come detto da jQuery Docs:

stopPropagation Il metodo impedisce all'evento di gorgogliare l'albero del DOM, impedendo a qualsiasi gestore padre di essere informato dell'evento.

Tieni presente che non impedisce ad altri ascoltatori di gestire questo evento (es. Più di un gestore di clic per un pulsante), se non è l'effetto desiderato, devi stopImmediatePropagationinvece utilizzare .

Ecco la mia soluzione per tutti quelli che cercano un codice non jQuery (javascript puro)

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

Il tuo codice non verrà eseguito se cliccato sui figli dei genitori

puoi anche provare questo

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

Se non hai intenzione di interagire con gli elementi interni in ogni caso, una soluzione CSS potrebbe essere utile per te.

Basta impostare l'elemento / i interno / i su pointer-events: none

nel tuo caso:

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

o per colpire tutti gli elementi interni in generale:

.clickable * {
    pointer-events: none;
}

Questo semplice hack mi ha fatto risparmiare molto tempo durante lo sviluppo con ReactJS

Il supporto del browser è disponibile qui: http://caniuse.com/#feat=pointer-events

Se hai più elementi nel div cliccabile, dovresti fare questo:

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

L'uso return false;o e.stopPropogation();non consentirà l'esecuzione di ulteriore codice. Arresterà il flusso in questo punto stesso.

Scrivendo se qualcuno ha bisogno (ha funzionato per me):

event.stopImmediatePropagation()

Da questa soluzione

Alternativa in linea:

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

Ecco un esempio usando Angular 2+

Ad esempio, se si desidera chiudere un componente modale se l'utente fa clic all'esterno di esso:

// 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();
}

Devi impedire all'evento di raggiungere (gorgogliare) il genitore (il div). Vedi la parte relativa al gorgogliamento qui e informazioni API specifiche di jQuery qui .

Per specificare alcuni sotto-elementi come non cliccabili, scrivi la gerarchia CSS come nell'esempio sotto.

In questo esempio interrompo la propagazione a tutti gli elementi (*) all'interno di td all'interno di tr all'interno di una tabella con la classe ".subtable"

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

});

ignoreParent () è una soluzione JavaScript pura.

Funziona come un livello intermedio che confronta le coordinate del clic del mouse con le coordinate dell'elemento / i figlio / i. Due semplici passaggi di implementazione:

1. Inserisci il codice ignoreParent () sulla tua pagina.

2. Invece dell'originale onclick del genitore = "parentEvent ();" , Scrivi:

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

È possibile trasmettere ID di qualsiasi numero di elementi figlio alla funzione ed escluderne altri.

Se hai fatto clic su uno degli elementi figlio, l'evento principale non viene generato. Se si fa clic su parent, ma non su nessuno degli elementi child [forniti come argomenti], l'evento parent viene generato.

codice ignoreParent () su Github

Se è in un contesto integrato, in HTML prova questo:

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

Nel caso in cui qualcuno abbia riscontrato questo problema utilizzando React, è così che l'ho risolto.

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

Component's render ():

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

Aggiungendo una funzione onClick per gli eventi modali secondari (div di contenuto) del mouse viene impedito di raggiungere la funzione 'closeLogin' dell'elemento genitore.

Questo ha funzionato per me e sono stato in grado di creare un effetto modale con 2 semplici div.

aggiungere acome segue:

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

o return false;dal gestore di clic per #clickablelike:

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

Tutte le soluzioni sono complicate e di jscript. Ecco la versione più semplice:

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>