Saya memiliki satu div html di halaman jsp saya, di atasnya saya telah meletakkan satu tag jangkar, silakan temukan kode di bawah ini untuk itu,
<div class="expandable-panel-heading">
<h2>
<a id="ancherComplaint" href="#addComplaint"
onclick="markActiveLink(this);">ABC</a>
</h2>
</div>
kode js
$('.expandable-panel-heading:not(#ancherComplaint)').click(function () {
alert('123');
});
function markActiveLink(el) {
alert($(el).attr("id"));
}
di sini saya ketika saya mengklik div saya mendapat peringatan dengan pesan 123
, tidak apa-apa tetapi ketika saya mengklik ABC saya ingin pesan saya ingin memanggil metode markActiveLink
.
[JSFiddle][1]
apa yang salah dengan kode saya? tolong bantu saya.
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](http://jsfiddle.net/JVrNc/5/)
$("#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.
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);
}