هناك مشاكل في فقاعات الأحداث والتقاط الأحداث في أحداث JavaScript و JQuery. فيما يلي ملخص مفصل للمشكلتين وحلولهما.
فقاعات الأحداث هي عملية من الفقاعات من الأطفال إلى العقد السلف ؛
التقاط الأحداث هو عكس ذلك تمامًا ، وهي عملية من العقد السلف إلى العقد.
إعطاء مثال على حدث نقرة jQuery:
الرمز كما يلي:
نسخة الكود كما يلي:
<! doctype html>
<meta charset = "utf-8">
<title> اختبار </title>
<head>
<script src = "http://code.jquery.com/jquery-latest.js"> </script>
<script type = "text/javaScript">
$ (function () {
$ ('#clickme'). انقر فوق (function () {
تنبيه ('hello') ؛
}) ؛
$ ('body'). انقر فوق (function () {
تنبيه ('طفل') ؛
}) ؛
}) ؛
</script>
</head>
<body>
<viv>
<button type = "button" id = "button2"> انقر فوق لي </button>
<button id = "clickme"> انقر فوق </button>
</div>
</body>
</html>
ظاهرة الفقاعة الحدث: انقر فوق زر "ID = ClickMe" ، وسيظهر مربعان منبثقين ، "Hello" و "Baby" واحدًا تلو الآخر.
التحليل: عند النقر فوق الزر "معرف = ClickMe" ، يتم تشغيل حدث النقر المرتبط بالزر وعناصر الأصل والزر والجسم ، لذلك يطفو مربعان على واحد تلو الآخر ، وتحدث ما يسمى ظاهرة الفقاعة.
ظاهرة التقاط الحدث: إذا قمت بالنقر فوق DIV والزر الذي لا يربط حدث النقر ، فسيظهر مربع الحوار "Baby".
في المشاريع الفعلية ، نريد منع فقاعات الأحداث والتقاط الأحداث.
كيفية منع الأحداث من الفقاعات:
الطريقة 1: إرجاع خطأ في حدث النقر الحالي ؛
نسخة الكود كما يلي:
$ ('#clickme'). انقر فوق (function () {
تنبيه ('hello') ؛
العودة كاذبة
}) ؛
الطريقة 2:
نسخة الكود كما يلي:
$ ('#clickme'). انقر فوق (وظيفة (حدث) {
تنبيه ('hello') ؛
var e = window.event || حدث؛
إذا (
E.StopPropagation () ؛
}آخر{
// أي طريقة متوافقة لإلغاء فقاعة الأحداث
window.event.cancelbubble = true ؛
}
}) ؛
يبدو أنه لا يمكن حظر حدث الالتقاط