شرح صفوف ومحتوى الفقرة
تخيل بطاقة قابلة للنقر لفتح تفاصيل المنتج وبداخلها زر صغير «حذف»؛ عند نقر الحذف لا نريد أن يتفعل مستمع النقر على البطاقة الخارجية معها. هنا يستدعى e.stopPropagation() داخل زر الحذف ليوقف صعود الحدث نحو العناصر الأب.
انتبه لعدم الخلط بين e.stopPropagation() التي تمنع وصول الحدث للآباء وبين e.preventDefault() التي تلغي سلوك المتصفح الافتراضي؛ وتجنب الإفراط العشوائي في إيقاف الانتشار لأن إغلاق القوائم المنسدلة عند النقر خارجها يعتمد على وصول الفقاعة إلى document.
JavaScript
const card = document.getElementById('course-card');
const muteBtn = document.getElementById('mute-btn');
const log = document.getElementById('prop-log');
card.addEventListener('click', function () {
log.textContent = 'Opened full course card!';
});
muteBtn.addEventListener('click', function (e) {
e.stopPropagation();
log.textContent = 'Muted alert only (card skipped).';
});