jQuery Academy · درس

إيقاف انتشار الأحداث

افهم .stopPropagation() و.preventDefault() للتحكم في تدفق الأحداث ومنع إجراءات المتصفح الافتراضية وإدارة تفاعلات الأحداث المعقّدة بفعالية.

إيقاف انتشار الأحداث درس مجاني في jQuery Academy على CoddyKit. هذا هو الدرس 2 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في jQuery Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة jQuery Academy 3 دروس في المجموع.

تحكّموا في أحداثكم!

الأحداث، مثل النقرات أو عمليات إرسال النماذج، لا تحدث على عنصر واحد فقط، بل تنتقل غالبًا عبر نموذج كائن المستند (DOM).

ويُعد تعلّم كيفية التحكم في هذا التدفق أمرًا أساسيًا لبناء صفحات ويب تفاعلية ودقيقة.

منع الإجراءات الافتراضية

تتضمن المتصفحات إجراءات افتراضية للعديد من عناصر HTML. على سبيل المثال:

يؤدي النقر على وسم <a> إلى الانتقال إلى صفحة جديدة.
يؤدي إرسال نموذج <form> إلى إعادة تحميل الصفحة.

نستخدم event.preventDefault() لإيقاف سلوكيات المتصفح المضمّنة هذه.

تطبيق `preventDefault()` عمليًا

جرّبوا النقر على الرابط أدناه. عادةً سينقلكم إلى example.com، لكن .preventDefault() يمنع هذا الانتقال!

<!DOCTYPE html>
<html>
<head>
<title>Prevent Default</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <h1>Prevent Default Example</h1>
  <a href="https://example.com" id="myLink">Click Me! (Should not navigate)</a>
  <div id="output"></div>

  <script>
  $(document).ready(function() {
    $('#myLink').on('click', function(event) {
      event.preventDefault(); // Stop the link from navigating
      $('#output').append('<p>Link click prevented! You\'re still here.</p>');
    });
  });
  </script>
</body>
</html>

فهم انتشار الأحداث

عندما يحدث حدث على عنصر، مثل النقر، فإنه لا يؤدي إلى تشغيل معالجات ذلك العنصر فقط، بل «ينتشر» صعودًا عبر شجرة DOM.

يشغّل المعالجات على العنصر الأب.
ثم على العنصر الجد.
وهكذا، وصولًا إلى <body> و<html>.

ويُسمّى هذا الانتقال إلى الأعلى انتشار الأحداث.

إيقاف الانتشار: `stopPropagation()`

أحيانًا، تريدون معالجة الحدث على العنصر الذي نشأ فيه فقط، أو على عنصر أب محدد، من دون التأثير في العناصر الأعلى مستوى.

هنا يأتي دور event.stopPropagation()، إذ يوقف انتشار الحدث صعودًا عبر شجرة DOM.

مثال على `stopPropagation()`

انقروا على المربع الداخلي. من دون stopPropagation()، ستظهر الرسالتان. أما عند استخدامه، فستظهر رسالة المربع الداخلي فقط لأن الانتشار يتوقف.

<!DOCTYPE html>
<html>
<head>
<title>Stop Propagation</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  #outer {
    padding: 20px;
    background-color: lightblue;
    border: 1px solid blue;
    margin: 10px;
  }
  #inner {
    padding: 20px;
    background-color: lightcoral;
    border: 1px solid red;
    margin-top: 10px;
  }
</style>
</head>
<body>
  <h1>Stop Propagation Example</h1>
  <div id="outer">
    Outer Div (Click me!)
    <div id="inner">
      Inner Div (Click me!)
    </div>
  </div>
  <div id="log"></div>

  <script>
  $(document).ready(function() {
    $('#outer').on('click', function() {
      $('#log').append('<p>Outer Div clicked!</p>');
    });

    $('#inner').on('click', function(event) {
      event.stopPropagation(); // Stop bubbling here
      $('#log').append('<p>Inner Div clicked!</p>');
    });
  });
  </script>
</body>
</html>

الاستخدامات العملية لإيقاف الانتشار

يكون stopPropagation() مفيدًا في سيناريوهات مثل:

مربعات الحوار المنبثقة: منع النقرات داخل مربع حوار من إغلاقه عبر تشغيل نقرة على الطبقة العلوية.
القوائم المنسدلة المتداخلة: إبقاء القائمة المنسدلة الفرعية مفتوحة عند النقر على القائمة الأب.
مكوّنات واجهة المستخدم المعقدة: ضمان عدم تداخل معالجات الأحداث الخاصة بمكوّنات معينة مع المستمعات العامة.

كائن الحدث

كل من .preventDefault() و.stopPropagation() طريقتان ضمن كائن الحدث. ويُمرَّر هذا الكائن كوسيط إلى دالة معالج الحدث لديكم.

يحتوي كائن الحدث على قدر كبير من المعلومات المفيدة حول الحدث الذي وقع، مثل نوعه، والعنصر الهدف، وإحداثيات مؤشر الفأرة.

<!DOCTYPE html>
<html>
<head>
<title>Event Object</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <h1>Event Object Properties</h1>
  <button id="myButton">Click Me</button>
  <div id="output"></div>

  <script>
  $(document).ready(function() {
    $('#myButton').on('click', function(event) {
      $('#output').empty(); // Clear previous output
      $('#output').append('<p>Event Type: <code>' + event.type + '</code></p>');
      $('#output').append('<p>Target Element ID: <code>' + event.target.id + '</code></p>');
      $('#output').append('<p>Mouse X Position: <code>' + event.pageX + '</code></p>');
      $('#output').append('<p>Mouse Y Position: <code>' + event.pageY + '</code></p>');
    });
  });
  </script>
</body>
</html>

دمج الطريقتين

أحيانًا، تحتاجون إلى استخدام كل من .preventDefault() و.stopPropagation()، فكل منهما يحل مشكلة مختلفة:

.preventDefault(): يوقف الإجراء الافتراضي للمتصفح.
.stopPropagation(): يوقف انتقال الحدث صعودًا عبر DOM.

على سبيل المثال، قد يحتاج زر داخل مكوّن معقد إلى منع سلوكه الافتراضي عند النقر، وكذلك منع النقر من تشغيل المعالجات الموجودة على العناصر الأب.

فهم التحكم في الأحداث

لديكم رابط <a href="#" id="link"> داخل عنصر div هو <div id="container">. وتريدون منع الرابط من الانتقال، وكذلك منع حدث النقر من تشغيل أي معالج على #container.

مراجعة: التحكم في الأحداث

أحسنتم! لقد تعلّمتم التحكم في تدفق الأحداث:

.preventDefault(): يوقف الإجراء الافتراضي للمتصفح تجاه حدث ما، مثل الانتقال عبر رابط أو إرسال نموذج.
.stopPropagation(): يمنع انتشار الحدث صعودًا عبر شجرة DOM إلى العناصر الأب.

تمنحكم هاتان الطريقتان القويتان تحكمًا دقيقًا في سلوك الأحداث داخل تطبيقات الويب الخاصة بكم، مما يؤدي إلى تجارب مستخدم أكثر قابلية للتوقّع ومتانة.

الأسئلة الشائعة

هل درس «إيقاف انتشار الأحداث» مجاني؟

نعم — نص درس «إيقاف انتشار الأحداث» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة jQuery Academy، انتقل إلى CoddyKit PRO. تتضمن دورة jQuery Academy 3 دروس في المجموع.

ماذا ستتعلم في «إيقاف انتشار الأحداث»؟

افهم .stopPropagation() و.preventDefault() للتحكم في تدفق الأحداث ومنع إجراءات المتصفح الافتراضية وإدارة تفاعلات الأحداث المعقّدة بفعالية. تتمرن على jQuery Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ jQuery Academy؟

لا تُشترط خبرة سابقة. jQuery Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 3.

كم من الوقت يستغرق درس «إيقاف انتشار الأحداث»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس jQuery Academy هذا؟

نعم. كل درس في jQuery Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى jQuery Academy