الفرق بين المراجعتين ل"jQuery/event/stopImmediatePropagation"
Khaled-yassin (نقاش | مساهمات) (أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:التابع <code>event.stopImmediatePropagation</code> في jQuery}}</noinclude> ==...') |
|||
| سطر 4: | سطر 4: | ||
=== القيمة المعادة === | === القيمة المعادة === | ||
| − | يُعيد هذا التابع | + | يُعيد هذا التابع القيمة <code>[[JavaScript/undefined|undefined]]</code>. |
=== الوصف === | === الوصف === | ||
| − | يمنع هذا التابع تنفيذ بقية معالجات الأحداث ومنع الحدث من | + | يمنع هذا التابع تنفيذ بقية معالجات الأحداث ومنع الحدث من الانتقال عبر شجرة DOM إلى العناصر الأب (event bubbling). |
=== <code>event.stopImmediatePropagation()</code> === | === <code>event.stopImmediatePropagation()</code> === | ||
| سطر 14: | سطر 14: | ||
لا يقبل هذا التابع أي وسائط. | لا يقبل هذا التابع أي وسائط. | ||
| − | بالإضافة إلى منع تنفيذ أي معالجات إضافية على عنصر ما، فإن هذا التابع أيضًا يمنع | + | بالإضافة إلى منع تنفيذ أي معالجات إضافية على عنصر ما، فإن هذا التابع أيضًا يمنع الانتقال عبر شجرة DOM إلى العناصر الأب عن طريق استدعاء <code>[[jQuery/event/stopPropagation|event.stopPropagation()]]</code> ضمنيًا. لمنع الحدث من الانتقال إلى العناصر الأب ببساطة مع السماح الأحداث الأخرى بالتنفيذ على نفس العنصر، يمكن استخدام <code>[[jQuery/event/stopPropagation|event.stopPropagation()]]</code> بدلاً من ذلك. |
يُستخدم التابع <code>event.isImmediatePropagationStopped()</code> للتحقق من استدعاء هذا التابع (على كائن الحدث هذا). | يُستخدم التابع <code>event.isImmediatePropagationStopped()</code> للتحقق من استدعاء هذا التابع (على كائن الحدث هذا). | ||
| سطر 22: | سطر 22: | ||
=== أمثلة === | === أمثلة === | ||
| − | منع استدعاء معالجات الأحداث الأخرى | + | منع استدعاء معالجات الأحداث الأخرى:<syntaxhighlight lang="html"> |
<!doctype html> | <!doctype html> | ||
<html lang="en"> | <html lang="en"> | ||
| سطر 66: | سطر 66: | ||
== مصادر == | == مصادر == | ||
| − | * [http://api.jquery.com/event.stopImmediatePropagation/ صفحة | + | * [http://api.jquery.com/event.stopImmediatePropagation/ صفحة التابع event.stopImmediatePropagation في توثيق jQuery الرسمي]. |
[[تصنيف:jQuery]] | [[تصنيف:jQuery]] | ||
[[تصنيف:jQuery Method]] | [[تصنيف:jQuery Method]] | ||
[[تصنيف:jQuery Events]] | [[تصنيف:jQuery Events]] | ||
مراجعة 09:00، 31 مايو 2018
event.stopImmediatePropagation()
القيمة المعادة
يُعيد هذا التابع القيمة undefined.
الوصف
يمنع هذا التابع تنفيذ بقية معالجات الأحداث ومنع الحدث من الانتقال عبر شجرة DOM إلى العناصر الأب (event bubbling).
event.stopImmediatePropagation()
أُضيف مع الإصدار: 1.3.
لا يقبل هذا التابع أي وسائط.
بالإضافة إلى منع تنفيذ أي معالجات إضافية على عنصر ما، فإن هذا التابع أيضًا يمنع الانتقال عبر شجرة DOM إلى العناصر الأب عن طريق استدعاء event.stopPropagation() ضمنيًا. لمنع الحدث من الانتقال إلى العناصر الأب ببساطة مع السماح الأحداث الأخرى بالتنفيذ على نفس العنصر، يمكن استخدام event.stopPropagation() بدلاً من ذلك.
يُستخدم التابع event.isImmediatePropagationStopped() للتحقق من استدعاء هذا التابع (على كائن الحدث هذا).
ملاحظات إضافية
نظرًا لأن التابع .live() يعالج الأحداث بمجرد نشرها إلى أعلى المستند، لا يمكن إيقاف نشر أحداث live. وبالمثل، فإن الأحداث التي يعالجها التابع .delegate() سوف تنتشر إلى العناصر التي فُوِّضَت إليها؛ ستُنفَّذ بالفعل معالجات الأحداث المرتبطة بأي عناصر تحتها في شجرة DOM في الوقت الذي يُستدعى فيه معالج الحدث المفوَّض. لذلك، قد تمنع هذه المعالجات المعالجَ المفوَّض من التشغيل عن طريق استدعاء event.stopPropagation() أو إعادة false .
أمثلة
منع استدعاء معالجات الأحداث الأخرى:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.stopImmediatePropagation demo</title>
<style>
p {
height: 30px;
width: 150px;
background-color: #ccf;
}
div {
height: 30px;
width: 150px;
background-color: #cfc;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>paragraph</p>
<div>division</div>
<script>
$( "p" ).click(function( event ) {
event.stopImmediatePropagation();
});
$( "p" ).click(function( event ) {
// This function won't be executed
$( this ).css( "background-color", "#f00" );
});
$( "div" ).click(function( event ) {
// This function will be executed
$( this ).css( "background-color", "#f00" );
});
</script>
</body>
</html>