Bir alt çapa tıklandığında bir ebeveynin onclick etkinliğinin tetiklenmesini nasıl önleyebilirim?

Şu anda bir div tıklanabilir yapmak için jQuery kullanıyorum ve bu div de çapa var. Bir çapa tıkladığımda, her iki tıklama olayının da tetiklediği (div ve çapa için). Bir çapa tıklandığında div'ın onclick etkinliğinin tetiklenmesini nasıl önleyebilirim?

İşte bozuk 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>

Etkinlikler, DOM'da bir tıklama etkinliğinin eklendiği en yüksek noktaya taşınır. Örneğinizde, div'de açıkça tıklanabilir başka öğeleriniz olmasa bile, div'in her alt öğesi, DIV'nin click event handler'i yakalayana kadar tıklama olaylarını DOM'ya kadar gönderir.

Bunun iki çözümü vardır, olayın gerçekte kimin kaynaklandığını kontrol etmektir. jQuery olayla birlikte bir eventargs nesnesi iletir:

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

Ayrıca, bağlantılarınıza kendi işleyicileri yürütüldükten sonra olay köpürmesini durdurmalarını söyleyen bir tıklama olay işleyicisi de ekleyebilirsiniz :

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

StopPropagation yöntemini kullanın , bir örneğe bakın:

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

JQuery Docs tarafından söylendiği gibi:

stopPropagation yöntemi, etkinliğin DOM ağacını köpürmesini önleyerek üst işleyicilerin olayla ilgili bildirim almasını engeller.

Diğer dinleyicilerin bu olayı işlemesini engellemediğini unutmayın (örn. Bir düğme için birden fazla tıklama işleyicisi), istenen efekt değilse, stopImmediatePropagationbunun yerine kullanmanız gerekir .

Burada benim olmayan bir jQuery kodu (saf javascript) arayan herkes için benim çözüm

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

Ebeveynin çocuklarına tıklanırsa kodunuz yürütülmez

bunu da deneyebilirsin

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

Her durumda iç eleman (lar) ile etkileşime girmeyi düşünmüyorsanız, bir CSS çözümü sizin için yararlı olabilir.

Sadece iç eleman (lar) ı pointer-events: none

Senin durumunda:

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

veya genel olarak tüm iç unsurları hedeflemek için:

.clickable * {
    pointer-events: none;
}

Bu kolay saldırı, ReactJS ile geliştirirken bana çok zaman kazandırdı

Tarayıcı desteği şu adreste bulunabilir: http://caniuse.com/#feat=pointer-events

Tıklanabilir div'da birden çok öğeniz varsa, bunu yapmanız gerekir:

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

Kullanılması return false;veya e.stopPropogation();daha fazla kod yürütmesine izin vermez. Bu noktada akışı durduracaktır.

Herhangi birinin ihtiyacı varsa yazma (benim için çalıştı):

event.stopImmediatePropagation()

Gönderen bu çözümü.

Satır İçi Alternatif:

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

İşte Angular 2+ kullanan bir örnek

Örneğin, kullanıcı bileşeninin dışını tıklarsa bir Kalıcı Bileşeni kapatmak istiyorsanız:

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

Etkinliğin ebeveyne (div) ulaşmasını (köpürmesini) durdurmanız gerekir. Burada köpürme ile ilgili kısma ve jQuery'ye özel API bilgilerine buradan bakın .

Bazı alt öğeleri seçilemez olarak belirtmek için aşağıdaki örnekte olduğu gibi css hiyerarşisini yazın.

Bu örnekte, ".subtable" sınıfına sahip bir tablonun içindeki td içindeki tr içindeki herhangi bir öğeye (*) yayılmasını durduruyorum.

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

});

ignoreParent () saf bir JavaScript çözümüdür.

Fare tıklatmasının koordinatlarını, alt öğelerin / öğelerin koordinatlarıyla karşılaştıran bir ara katman olarak çalışır. İki basit uygulama adımı:

1. ignoreParent () kodunu sayfanıza yerleştirin.

2. Üst öğenin orijinal yerine yerine onclick = "parentEvent ();" , yazmak:

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

Herhangi bir sayıda alt öğenin kimliklerini işleve iletebilir ve diğerlerini hariç tutabilirsiniz.

Alt öğelerden birini tıkladıysanız, üst etkinlik tetiklenmez. Üst öğeyi tıkladıysanız, ancak [bağımsız değişken olarak sağlanan] alt öğelerin hiçbirini seçmediyseniz, üst etkinlik tetiklenir.

Github'daki ignoreParent () kodu

Satır içi bağlamdaysa, HTML'de şunu deneyin:

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

Birisi React kullanarak bu sorunu yaşarsa, bu şekilde çözdüm.

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

Bileşenin render ():

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

Alt mod (içerik div) fare tıklatma olayları için bir onClick işlevi ekleyerek, üst öğenin 'closeLogin' işlevine ulaşması engellenir.

Bu benim için hile yaptı ve 2 basit div ile kalıcı bir etki yaratabildim.

aaşağıdaki gibi ekleyin :

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

veya aşağıdakiler return false;için tıklama işleyicisinden #clickable:

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

Tüm çözüm karmaşık ve jscripttir. İşte en basit sürüm:

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>