ما هو الحدث الفقاعي؟
أي أنه عند تداخل عدة أقسام، أي يتم إنشاء علاقة بين الأصل والفرع، وعندما ينضم القسم الأصلي والقسم الفرعي إلى حدث عند النقر، عند تشغيل حدث عند النقر لقسم فرعي، يقوم القسم الفرعي بتنفيذ الإجراء المقابل. عملية شبيبة. ولكن سيتم أيضًا تشغيل حدث onclick الخاص بـ div الأصلي. وينتج عن هذا مستويات متعددة من تزامن الأحداث، مما يؤدي إلى فوضى الصفحة. هذا حدث فقاعي.
كيفية القضاء على الأحداث محتدما
منع أحداث JavaScript من الظهور (cancelBubble، stopPropagation)
يمكن للجزء التالي من الكود أن يشرح جيدًا ما هو تأثير الفقاعات وما هو التخلص من تأثير الفقاعات؟
انسخ رمز الكود كما يلي:
<أتش تي أم أل>
<الرأس>
<title> منع أحداث JavaScript من الظهور (cancelBubble، stopPropagation)</title>
<meta name="keywords" content="JavaScript، حدث محتدما، CancelBubble، stopPropagation" />
<نوع البرنامج النصي = "نص/جافا سكريبت">
وظيفة افعل شيئًا (obj،evt) {
تنبيه (obj.id)؛
var e=(evt)?evt:window.event; // تحديد نوع المتصفح واستخدام CancelBubble في المتصفحات المستندة إلى IE kernel
إذا (نافذة.الحدث) {
e.cancelBubble=true;
} آخر {
//e.preventDefault(); //دعم طريقة stopPropagation في المتصفحات القائمة على نواة فايرفوكس
e.stopPropagation();
}
}
</script>
</الرأس>
<الجسم>
<div id="parent1" onclick="alert(this.id)">
<p>هذا هوparent1 div.</p>
<div id="child1" onclick="alert(this.id)">
<p>هذا هو الطفل 1.</p>
</div>
<p>هذا هوparent1 div.</p>
</div>
<br />
<div id="parent2" onclick="alert(this.id)">
<p>هذا هوparent2 div.</p>
<div id="child2" onclick="doSomething(this,event);">
<p>هذا هو الطفل 2. سوف فقاعة.</p>
</div>
<p>هذا هوparent2 div.</p>
</div>
</الجسم>
</html>
بعد نسخ الكود مباشرة، عند النقر فوق Child1، لن يظهر مربع الحوار Child1 فحسب، بل سينبثق أيضًا مربع الحوار Parent1.
هذا هو الحدث الفقاعي
لكن النقر فوق chile2 سينبثق فقط Child2 وليسparent2، وهذا هو تأثير تطبيق المؤثرات الخاصة التي تمنع ظهور الأحداث.