Jak zapobiec uruchamianiu zdarzenia onclick rodzica po kliknięciu zakotwiczenia podrzędnego?

Obecnie używam jQuery, aby div mógł być klikalny, aw tym div też mam kotwice. Problem, na który wpadam, polega na tym, że po kliknięciu kotwicy uruchamiane są oba zdarzenia kliknięcia (dla div i kotwicy). Jak zapobiec uruchamianiu zdarzenia div po kliknięciu kotwicy?

Oto uszkodzony kod:

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>

Bańki zdarzeń do najwyższego punktu w DOM, w którym zostało dołączone zdarzenie kliknięcia. Tak więc w twoim przykładzie, nawet jeśli nie masz żadnych innych elementów, które można wyraźnie kliknąć w div, każdy element potomny div będzie umieszczał bąbelki na zdarzeniu kliknięcia w górę do DOM, aż do momentu, gdy program obsługi zdarzeń kliknięcia DIV go złapie.

Istnieją dwa rozwiązania tego, aby sprawdzić, kto faktycznie zainicjował wydarzenie. jQuery przekazuje obiekt eventargs wraz ze zdarzeniem:

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

Możesz również dołączyć moduł obsługi zdarzeń kliknięcia do swoich linków, który każe im przestać propagować zdarzenia po wykonaniu przez własną procedurę obsługi:

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

Użyj metody stopPropagation , zobacz przykład:

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

Jak powiedział jQuery Docs:

stopPropagation Metoda zapobiega propagacji zdarzenia do drzewa DOM, zapobiegając powiadamianiu o zdarzeniu przez wszystkie programy nadrzędne.

Pamiętaj, że nie przeszkadza to innym słuchaczom w obsłudze tego zdarzenia (np. Więcej niż jeden moduł obsługi kliknięcia dla przycisku), jeśli nie jest to pożądany efekt, musisz go użyć stopImmediatePropagation.

Oto moje rozwiązanie dla wszystkich, którzy szukają kodu innego niż jQuery (czysty javascript)

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

Twój kod nie zostanie wykonany, jeśli klikniesz na dziecko rodzica

możesz także spróbować tego

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

Jeśli nie zamierzasz wchodzić w interakcje z wewnętrznym elementem / elementami, rozwiązanie CSS może być dla Ciebie przydatne.

Wystarczy ustawić element wewnętrzny na pointer-events: none

w Twoim przypadku:

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

lub ogólnie kierować na wszystkie elementy wewnętrzne:

.clickable * {
    pointer-events: none;
}

Ten prosty hack zaoszczędził mi dużo czasu podczas programowania w ReactJS

Obsługę przeglądarki można znaleźć tutaj: http://caniuse.com/#feat=pointer-events

Jeśli masz wiele elementów w klikalnym div, powinieneś to zrobić:

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

Użycie return false;lub e.stopPropogation();nie pozwoli na wykonanie dalszego kodu. W tym momencie zatrzyma przepływ.

Pisanie, jeśli ktoś potrzebuje (pracował dla mnie):

event.stopImmediatePropagation()

Z tego rozwiązania.

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>

Oto przykład użycia Angulara 2+

Na przykład, jeśli chcesz zamknąć moduł modalny, jeśli użytkownik kliknie poza nim:

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

Musisz powstrzymać wydarzenie przed dotarciem do rodzica (div). Zobacz część o propagacji tutaj i informacje o interfejsie API specyficznym dla jQuery tutaj .

Aby określić jakiś element podrzędny jako niemożliwy do zapisania, napisz hierarchię css, jak w poniższym przykładzie.

W tym przykładzie zatrzymuję propagację do dowolnych elementów (*) wewnątrz td wewnątrz tr wewnątrz tabeli z klasą „.subtable”

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

});

ignoreParent () jest czystym rozwiązaniem JavaScript.

Działa jako warstwa pośrednia, która porównuje współrzędne kliknięcia myszy ze współrzędnymi elementu / elementów potomnych. Dwa proste kroki wdrożenia:

1. Umieść kod ignoreParent () na swojej stronie.

2. Zamiast oryginalnego obiektu nadrzędnego onclick = "parentEvent ();" , pisać:

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

Możesz przekazać identyfikatory dowolnej liczby elementów potomnych do funkcji i wykluczyć inne.

Jeśli klikniesz jeden z elementów potomnych, zdarzenie nadrzędne nie zostanie uruchomione. Jeśli kliknąłeś element nadrzędny, ale nie element podrzędny [podany jako argument], zdarzenie nadrzędne zostanie uruchomione.

kod ignoreParent () na Github

Jeśli jest w kontekście wbudowanym, w HTML spróbuj tego:

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

W przypadku, gdy ktoś miał ten problem przy użyciu React, tak to rozwiązałem.

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

Renderowanie komponentu ():

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

Dodając funkcję onClick do modalnego elementu potomnego (div treści), kliknięcia myszy zapobiegają osiągnięciu funkcji „closeLogin” elementu nadrzędnego.

To załatwiło sprawę i byłem w stanie stworzyć efekt modalny z 2 prostymi divami.

dodaj aw następujący sposób:

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

lub return false;z modułu obsługi kliknięć dla #clickable:

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

Wszystkie rozwiązania są skomplikowane i jscript. Oto najprostsza wersja:

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>