มอบหมายงานและป้องกันฟองสบู่จากการเรียกเหตุการณ์องค์ประกอบหลัก

เพียงแค่พูดคุยเกี่ยวกับการว่าจ้างเหตุการณ์และป้องกันฟองสบู่

html:

 <ul data-type = "citypick"> <li data-id = "0"> ทั้งหมด </li> <li data-id = "88"> นิวยอร์ก </li> <li data-id = "119"> ลอสแองเจลิส </li> Francisco </li> <li data-id = "105"> ออร์แลนโด </li> <li data-id = "118"> seattle </li></ul>

JS:

 $ ("ul [data-type = 'citypick']"). on ('คลิก', function () {alert ("องค์ประกอบหลัก UL ถูกคลิก");}); $ ("ul [data-type = 'citypick']") on ('คลิก', 'li', function () {alert ("องค์ประกอบลูก li ถูกคลิก");});

เมื่อคลิกที่องค์ประกอบ LI ที่เฉพาะเจาะจงเหตุการณ์ของ UL จะถูกเรียกใช้ซึ่งเป็นสิ่งที่เราไม่ต้องการเห็น

แก้ปัญหา:

 $ ("ul [data-type = 'citypick']"). on ('คลิก', function () {alert ("องค์ประกอบหลัก UL ถูกคลิก");}); $ ("ul [data-type = 'citypick']"). on ('คลิก', 'li', ฟังก์ชั่น (e) {e.stoppropagation (); // หยุดการแจ้งเตือนฟองสบู่ ("องค์ประกอบลูก Li ถูกคลิก");});

เพียงเพิ่มประโยคเพื่อหยุดฟอง