تشير آلية Bubble JS إلى ما إذا كان هناك عنصر يحدد الحدث A ، مثل حدث النقر.
كما هو موضح في المثال التالي:
نسخة الكود كما يلي:
<html>
<script type = "text/javaScript" src = "jquery-1.7.1.js"> </script>
<script>
وظيفة iAlertDouble (e) {
تنبيه ('innerdouble') ؛
stopbubble (e) ؛
}
دالة iLERTTHREE (e) {
تنبيه ('Innerthree') ؛
stopbubledouble (e) ؛
}
وظيفة stopbubble (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'mnymnymny: (
// ALERT ('Innerfour') ؛
// event.stopPropagation () ؛
// event.preventDefault () ؛
//}) ؛
// الطريقة 2
$ ('#jQueryTest'). انقر فوق (function () {
تنبيه ('innerfour') ؛
العودة كاذبة
}) ؛
}) ؛
</script>
<div onClick = "Alert ('بدون') ؛"> بدون
<div onClick = "Alert ('middle') ؛"> middle
<div onClick = "Alert ('inner') ؛"> inner </div>
<div onClick = "ialertdouble (event)"> innerdouble </iv>
<p> <a href = 'http: //www.baidu.com' onClick = "IalertThree (event)"> Innerthree </a> </p>
<p id = 'jQueryTest'> <a href = 'http: //www.baidu.com'> innerfour </a> </p>
</div>
</div>
</html>
عند النقر فوق Inner و "Inner" و "Middle" و "بدون" سوف يطفو على السطح بدوره. هذه هي فقاعة الحدث.
من الناحية البسيطة ، هذا هو الحال ، لأن المنطقة الأعمق موجودة في العقدة الأصل.
في الواقع ، في كثير من الأحيان ، لا نريد أن تتفوق الأحداث ، لأن هذا سيؤدي إلى العديد من الأحداث في نفس الوقت.
التالي: دعنا نضغط innerdouble. ستجد أنها ليست مخففة لأنها تسمى طريقة stopbubble () في الطريقة المسمى IalertDouble ().
ولكن إذا كان ذلك رابطًا ، فسنجد أنه سيمنع الفقاعات أيضًا ، لكنه سيقفز ، وهو السلوك الافتراضي للمتصفح. يجب حظره باستخدام طريقة PreventDefault (). للحصول على التفاصيل ، يمكنك التحقق من IalertThree ().
في الوقت الحاضر ، يستخدم الأشخاص الرئيسيون jQuery لربط أحداث النقر ، وهو أبسط بكثير.
يمكننا تمرير حدث المعلمة عند النقر فوق الحدث ، ثم مباشرة
event.stoppropagation () ؛
Event.PreventDefault () ؛
هذا كل شيء.
الإطار جيد ، ولكن في الواقع هناك طريقة أبسط.
[انظر الرمز التفصيلي أعلاه ، تذكر تحميل jQuery.js. 】
في الواقع ، يمكنك أيضًا إضافة أحكام إلى كل حدث نقرة:
نسخة الكود كما يلي:
$ ('#id'). انقر فوق (وظيفة (حدث) {
if (event.target == this) {
// افعل شيئًا
}
})
التحليل: الحدث المتغير في معالج الأحداث يحفظ كائن الحدث. تمتلك Property Event.Target العنصر المستهدف للحدث. تم تحديد هذه الخاصية في DOM API ، ولكن لا يتم تنفيذها بواسطة جميع المتصفحات. تقوم JQuery بإجراء امتدادات ضرورية لكائن الحدث هذا بحيث يمكن استخدام هذه الخاصية في أي متصفح. باستخدام .Target ، من الممكن تحديد العنصر في DOM الذي يتلقى الحدث أولاً (أي العنصر الذي تم النقر عليه بالفعل). علاوة على ذلك ، نعلم أن هذا يشير إلى عنصر DOM الذي يتولى الأحداث ، حتى نتمكن من كتابة الرمز أعلاه.
ومع ذلك ، يوصى باستخدام Return False ، إذا كان jQuery يربط الأحداث.