กลไก Bubble JS หมายถึงหากองค์ประกอบกำหนดเหตุการณ์ A เช่นเหตุการณ์คลิก
ดังที่แสดงในตัวอย่างต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
<html>
<script type = "text/javascript" src = "jQuery-1.7.1.js"> </script>
<script>
ฟังก์ชั่น ialertDouble (e) {
การแจ้งเตือน ('InnerDouble');
STOPBUBBLE (E);
-
ฟังก์ชั่น ialertthree (e) {
การแจ้งเตือน ('InnerThree');
Stopbubbledouble (E);
-
ฟังก์ชั่นหยุดบ่ม (e) {
var evt = e || window.event;
evt.stoppropagation? evt.stoppropagation () :( evt.cancelbubble = true); // หยุดฟองสบู่จากการถูกบวมขึ้น;
-
ฟังก์ชั่น StopBubbledouble (E) {
var evt = e || window.event;
evt.stoppropagation? evt.stoppropagation () :( evt.cancelbubble = true); // หยุดฟองสบู่จากการถูกบวมขึ้น;
evt.preventdefault (); // บล็อกพฤติกรรมเริ่มต้นของเบราว์เซอร์เพื่อให้ลิงก์ไม่กระโดด
-
$ (function () {
// วิธี 1
//$('#jQueryTest').CLICK(FUNCTION(EVENT) {
// Alert ('InnerFour');
// event.stoppropagation ();
// event.preventdefault ();
-
// วิธี 2
$ ('#jQueryTest') คลิก (ฟังก์ชัน () {
การแจ้งเตือน ('innerfour');
กลับเท็จ;
-
-
</script>
<div onclick = "การแจ้งเตือน ('ไม่มี');"> ไม่มี
<div onclick = "การแจ้งเตือน ('กลาง');"> กลาง
<div onclick = "Alert ('inner');"> inner </div>
<div onclick = "ialertDouble (เหตุการณ์)"> innerDouble </div>
<p> <a href = 'http: //www.baidu.com' onclick = "ialertthree (เหตุการณ์)"> innerthree </a> </p>
<p id = 'jQueryTest'> <a href = 'http: //www.baidu.com'> innerfour </a> </p>
</div>
</div>
</html>
เมื่อคุณคลิกที่ด้านใน 'ภายใน', 'กลาง' และ 'ไม่มี' จะปรากฏขึ้นในทางกลับกัน นี่คือฟองสบู่
การพูดอย่างสังหรณ์ใจนี่เป็นกรณีเนื่องจากพื้นที่ด้านในสุดอยู่ในโหนดพาเรนต์
ในความเป็นจริงหลายครั้งเราไม่ต้องการให้เหตุการณ์เดือดดาลเพราะสิ่งนี้จะก่อให้เกิดเหตุการณ์หลายอย่างในเวลาเดียวกัน
ถัดไป: คลิก InnerDouble กันเถอะ คุณจะพบว่าเธอไม่ได้เป็นฟองเพราะเธอเรียกวิธีการหยุดยั้ง () ในวิธีที่เรียกว่า ialertdouble ()
แต่ถ้ามันเป็นลิงค์เราจะพบว่ามันจะป้องกันฟองสบู่ด้วย แต่มันจะกระโดดซึ่งเป็นพฤติกรรมเริ่มต้นของเบราว์เซอร์ มันจะต้องถูกบล็อกโดยใช้วิธี PreventDefault () สำหรับรายละเอียดคุณสามารถตรวจสอบ ialertthree ()
ในปัจจุบันผู้คนกระแสหลักใช้ jQuery เพื่อผูกกิจกรรมคลิกซึ่งง่ายกว่ามาก
เราสามารถส่งผ่านเหตุการณ์พารามิเตอร์เมื่อคลิกที่เหตุการณ์และจากนั้นโดยตรง
Event.StopPropagation ();
Event.preventDefault ();
นั่นคือทั้งหมด
เฟรมเวิร์กเป็นสิ่งที่ดี แต่ในความเป็นจริงมีสิ่งที่ง่ายกว่า
[ดูรหัสรายละเอียดด้านบนอย่าลืมโหลด jQuery.js -
อันที่จริงคุณสามารถเพิ่มการตัดสินในแต่ละเหตุการณ์คลิก:
การคัดลอกรหัสมีดังนี้:
$ ('#id') คลิก (ฟังก์ชั่น (เหตุการณ์) {
if (event.target == สิ่งนี้) {
// ทำอะไรบางอย่าง
-
-
การวิเคราะห์: เหตุการณ์ตัวแปรในตัวจัดการเหตุการณ์บันทึกวัตถุเหตุการณ์ Event.target Property ถือองค์ประกอบเป้าหมายของเหตุการณ์ คุณสมบัตินี้ระบุไว้ใน DOM API แต่ไม่ได้ใช้งานโดยเบราว์เซอร์ทั้งหมด jQuery ทำให้ส่วนขยายที่จำเป็นสำหรับวัตถุเหตุการณ์นี้เพื่อให้สามารถใช้คุณสมบัตินี้ในเบราว์เซอร์ใด ๆ ด้วย. target มันเป็นไปได้ที่จะกำหนดองค์ประกอบใน DOM ที่ได้รับเหตุการณ์ก่อน (เช่นองค์ประกอบที่ถูกคลิกจริง) ยิ่งกว่านั้นเรารู้ว่าสิ่งนี้หมายถึงองค์ประกอบ DOM ที่จัดการกับเหตุการณ์ดังนั้นเราจึงสามารถเขียนโค้ดด้านบน
อย่างไรก็ตามขอแนะนำให้ใช้ return false หาก jQuery ผูกเหตุการณ์