Rumah > Artikel > hujung hadapan web > Contoh kecil menerangkan cara menghalang peristiwa Jquery daripada bubbling_jquery

Contoh kecil menerangkan cara menghalang peristiwa Jquery daripada bubbling_jquery

WBOYasal: 2016-05-16 16:41:42870semak imbas

Apakah acara JS menggelegak?

Cetuskan jenis acara tertentu pada objek (seperti acara onclick Jika objek mentakrifkan pengendali untuk acara ini, maka acara ini akan memanggil pengendali ini jika pengendali acara ini tidak ditakrifkan atau acara itu kembali benar , maka peristiwa ini akan disebarkan ke objek induk objek ini, dari dalam ke luar, sehingga ia diproses (semua peristiwa serupa objek induk akan diaktifkan), atau ia mencapai tahap atas hierarki objek, iaitu, objek dokumen (Sesetengah pelayar adalah tetingkap).

Bagaimana untuk menghentikan acara Jquery daripada menggelegak?

Terangkan dengan contoh kecil

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>Porschev---Jquery 事件冒泡</title> 

<script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script> 

</head> 
<body> 
<form id="form1" runat="server"> 
<div id="divOne" onclick="alert('我是最外层');"> 
<div id="divTwo" onclick="alert('我是中间层！')"> 
<a id="hr_three" href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" mce_href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" onclick="alert('我是最里层！')">点击我</a> 
</div> 
</div> 
</form> 
</body> 
</html>

Contohnya, halaman di atas,
Terbahagi kepada tiga lapisan: divOne ialah lapisan luar, divTwo ialah lapisan tengah dan hr_three ialah lapisan paling dalam
Kesemuanya mempunyai peristiwa klik mereka sendiri, dan teg yang paling dalam juga mempunyai atribut href.

Jalankan halaman, klik "Klik saya", dan ia akan muncul: Saya lapisan paling dalam---->Saya lapisan tengah---->Saya lapisan paling luar
---->Kemudian paut ke Baidu.

Ini adalah peristiwa menggelegak Pada asalnya, saya hanya mengklik pada label dengan ID hr_three, tetapi tiga operasi amaran telah dilaksanakan.
Proses menggelegak acara (diwakili oleh ID teg): hr_three----> Berbuih dari lapisan paling dalam ke lapisan paling luar.

Bagaimana untuk menghentikannya?

1.event.stopPropagation();

<script type="text/javascript">
$(function() {
$("#hr_three").click(function(event) {
event.stopPropagation();
});
});
<script>

Klik "Klik saya" sekali lagi, ia akan muncul: Saya adalah lapisan paling dalam, dan kemudian paut ke Baidu

2.kembali palsu;

Jika kod berikut ditambahkan pada pengepala

<script type="text/javascript">
$(function() {
$("#hr_three").click(function(event) {
return false;
});
});
<script>

Klik "Klik saya" sekali lagi, dan pop timbul akan muncul: Saya adalah lapisan paling dalam, tetapi pautan ke halaman Baidu tidak akan dilaksanakan

Ia boleh dilihat daripada ini:

1.event.stopPropagation();

Semasa pemprosesan acara, acara menggelegak dihalang, tetapi tingkah laku lalai tidak disekat (ia melaksanakan lompatan hiperpautan)

2.kembali palsu;

Semasa pemprosesan acara, acara menggelegak dihalang dan tingkah laku lalai dihalang (contohnya, ia tidak melaksanakan lompatan hiperpautan sebentar tadi)

Terdapat satu lagi yang berkaitan dengan menggelegak:

3.event.preventDefault();

Jika anda meletakkannya dalam acara klik pada teg pengepala A, klik "Klik saya".
Anda akan mendapati bahawa ia muncul mengikut urutan: Saya adalah lapisan paling dalam---->Saya adalah lapisan tengah---->Saya adalah lapisan paling luar, tetapi pada akhirnya ia tidak melompat ke Baidu

Fungsinya ialah: semasa pemprosesan acara, ia tidak menyekat acara menggelegak, tetapi menyekat kelakuan lalai (ia hanya melaksanakan semua kotak pop timbul, tetapi tidak melaksanakan lompatan hiperpautan)

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：2 penyelesaian kepada masalah kehilangan perujuk dalam JS melompat dalam kemahiran IE_javascriptArtikel seterusnya：2 penyelesaian kepada masalah kehilangan perujuk dalam JS melompat dalam kemahiran IE_javascript

Artikel berkaitan

Lihat lagi