html div acara onclick div html

Masalahnya adalah bahwa mengklik jangkar masih memicu klik di <div> Anda. Itu disebut "event bubbling".

Sebenarnya, ada beberapa solusi:

• Memeriksa di DIV click event handler apakah elemen target sebenarnya adalah jangkar
  → jsFiddle

    $('.expandable-panel-heading').click(function (evt) {
        if (evt.target.tagName != "A") {
            alert('123');
        }
  
        // Juga memungkinkan jika kondisi:
        // - evt.target.id != "ancherComplaint"
        // - !$(evt.target).is("#ancherComplaint")
    });
  
    $("#ancherComplaint").click(function () {
        alert($(this).attr("id"));
    });

• Menghentikan propagasi peristiwa dari pendengar klik jangkar
  → jsFiddle

    $("#ancherComplaint").click(function (evt) {
        evt.stopPropagation();
        alert($(this).attr("id"));
    });

:not(#ancherComplaint)

Hal ini tidak diperlukan karena tidak ada elemen dengan kelas .expandable-panel-heading yang juga memiliki #ancherComplaint sebagai ID-nya.

Saya berasumsi bahwa Anda ingin menekan event untuk anchor. Itu tidak dapat bekerja dengan cara itu karena kedua selektor (milik Anda dan milik saya) memilih DIV yang sama persis. Selektor tidak memiliki pengaruh pada pendengar ketika dipanggil; selektor hanya menetapkan daftar elemen yang harus didaftarkan pendengarnya. Karena daftar ini sama di kedua versi, maka tidak ada perbedaan.

Coba ini

$('.expandable-panel-heading:not(#ancherComplaint)').click(function () {
    alert('123');
});

$('#ancherComplaint').click(function (event) {
    alert($(this).attr("id"));
    event.stopPropagation()
})

DEMO

Anda perlu membaca tentang event bubbling dan yang pasti hapus penanganan event inline jika Anda memiliki jQuery pula

Uji klik pada div dan periksa targetnya

Live Demo

$(".expandable-panel-heading").on("click",function (e) {
    if (e.target.id =="ancherComplaint") { // or test the tag
        e.preventDefault(); // or e.stopPropagation()
        markActiveLink(e.target);
    }    
    else alert('123');
});
function markActiveLink(el) {   
    alert(el.id);
}