Bagaimana saya mencegah acara onclick orang tua dari menembak ketika jangkar anak diklik?

Saat ini saya menggunakan jQuery untuk membuat div yang dapat diklik dan dalam div ini saya juga memiliki jangkar. Masalah yang saya hadapi adalah ketika saya mengklik sebuah anchor, kedua event klik itu menyala (untuk div dan anchor). Bagaimana cara mencegah acara onclick div dari menembak ketika jangkar diklik?

Berikut kode yang rusak:

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>

Acara menggelembung ke titik tertinggi di DOM tempat acara klik dilampirkan. Jadi dalam contoh Anda, bahkan jika Anda tidak memiliki elemen lain yang dapat diklik secara eksplisit di div, setiap elemen anak dari div akan menggelembungkan acara klik mereka ke atas DOM hingga penangan event klik DIV menangkapnya.

Ada dua solusi untuk ini adalah memeriksa untuk melihat siapa yang sebenarnya memulai acara tersebut. jQuery melewati objek eventargs bersama acara:

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

Anda juga dapat melampirkan pengendali acara klik ke tautan Anda yang memberi tahu mereka untuk berhenti menggelegak setelah penangan mereka menjalankan:

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

Gunakan metode stopPropagation , lihat contoh:

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

Seperti yang dikatakan oleh jQuery Docs:

stopPropagation Metode mencegah acara melelehkan pohon DOM, mencegah penangan orang tua diberitahu tentang acara tersebut.

Ingatlah bahwa itu tidak benar menghalangi pendengar lain untuk menangani acara ini (mis. Lebih dari satu penangan klik untuk sebuah tombol), jika itu bukan efek yang diinginkan, Anda harus menggunakannya stopImmediatePropagation.

Di sini solusi saya untuk semua orang di luar sana mencari kode non-jQuery (javascript murni)

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

Kode Anda tidak akan dieksekusi jika diklik pada anak-anak orang tua

Anda juga dapat mencoba ini

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

Jika Anda tidak berniat untuk berinteraksi dengan elemen dalam / dalam hal apa pun, maka solusi CSS mungkin berguna untuk Anda.

Cukup atur elemen dalam ke pointer-events: none

dalam kasus Anda:

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

atau untuk menargetkan semua elemen dalam secara umum:

.clickable * {
    pointer-events: none;
}

Peretasan mudah ini menyelamatkan saya banyak waktu saat berkembang dengan ReactJS

Dukungan peramban dapat ditemukan di sini: http://caniuse.com/#feat=pointer-events

Jika Anda memiliki banyak elemen di div yang dapat diklik, Anda harus melakukan ini:

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

Menggunakan return false;atau e.stopPropogation();tidak akan membiarkan kode lebih lanjut dieksekusi. Ini akan berhenti mengalir pada titik ini sendiri.

Menulis jika ada yang butuh (bekerja untuk saya):

event.stopImmediatePropagation()

Dari solusi ini .

Alternatif Sebaris:

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

Berikut ini contoh menggunakan Angular 2+

Misalnya, jika Anda ingin menutup Komponen Modal jika pengguna mengklik di luarnya:

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

Anda harus menghentikan acara dari mencapai (menggelegak ke) orang tua (div). Lihat bagian tentang menggelegak di sini , dan info API khusus jQuery di sini .

Untuk menentukan beberapa sub elemen sebagai tidak dapat ditulis, tulis hierarki css seperti pada contoh di bawah ini.

Dalam contoh ini saya menghentikan propagasi ke elemen (*) di dalam td di dalam tr di dalam tabel dengan kelas ".subtable"

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

});

AbaikanParent () adalah solusi JavaScript murni.

Ini berfungsi sebagai lapisan perantara yang membandingkan koordinat klik mouse dengan koordinat elemen anak. Dua langkah implementasi sederhana:

1. Masukkan kode ignParent () pada halaman Anda.

2. Alih-alih onclick asli orang tua = "parentEvent ();" , menulis:

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

Anda dapat mengirimkan ID dari sejumlah elemen anak ke fungsi, dan mengecualikan yang lain.

Jika Anda mengklik salah satu elemen anak, acara induk tidak menyala. Jika Anda mengklik orangtua, tetapi tidak pada salah satu elemen anak [disediakan sebagai argumen], acara induk dipecat.

kode ignParent () pada Github

Jika berada dalam konteks sebaris, dalam HTML coba ini:

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

Jika seseorang memiliki masalah ini menggunakan Bereaksi, ini adalah bagaimana saya menyelesaikannya.

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

Pembuatan komponen ():

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

Dengan menambahkan fungsi onClick untuk aktivitas klik mouse modal anak (konten div) dicegah untuk mencapai fungsi 'closeLogin' dari elemen induk.

Ini melakukan trik untuk saya dan saya dapat membuat efek modal dengan 2 div sederhana.

tambahkan asebagai berikut:

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

atau return false;dari click handler untuk #clickablelike:

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

Semua solusi itu rumit dan jscript. Ini adalah versi paling sederhana:

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>