stopPropagation

16/03/2024
5

تفادي تنفيذ حدث النقر على العنصر الأب عند النقر على العنصر الابن
عندما يكون لديك عناصر يمكن النقر عليها داخل عنصر أب، وترغب في تنفيذ حدث النقر على العنصر الأب فقط عند النقر على العنصر الابن، يمكنك تنفيذ هذا بسهولة باستخدام jQuery. توفر jQuery وظيفة تسمى stopPropagation() التي تمنع تنفيذ أي حدث يتم تمريره إليها بعد تنفيذها.

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

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

إليك مثال عملي باستخدام jQuery:
```
javascript
// عند النقر على العنصر الابن
$('.child-element').click(function(event) {
    // منع انتشار الحدث إلى العنصر الأب
    event.stopPropagation();
    
    // هنا يمكنك تنفيذ أي عمليات أخرى ترغب في تنفيذها عند النقر على العنصر الابن
});

// عند النقر على العنصر الأب
$('.parent-element').click(function() {
    // هنا يمكنك تنفيذ الإجراء المطلوب عند النقر على العنصر الأب
});
```
مع هذا التنفيذ، عندما يتم النقر على العنصر الابن، فإن حدث النقر على العنصر الأب لن يتم تنفيذه ما لم تكن هناك أية أوامر أخرى داخل الحدث نفسه تؤدي إلى تنفيذه.
المزيد من المعلومات
بالطبع، إليك مزيدًا من المعلومات حول كيفية تنفيذ هذا السيناريو باستخدام jQuery.
1. تحديد العناصر:
  يجب أولاً تحديد العناصر الابن والأب في DOM باستخدام محددات CSS أو محددات jQuery.
  
  javascript
  var childElement = $('.child-element'); var parentElement = $('.parent-element');
2. ربط حدث النقر على العنصر الابن:
  بمجرد تحديد العنصر الابن، يمكنك ربط حدث النقر به.
  
  javascript
  childElement.click(function(event) { // تمنع انتشار الحدث إلى العنصر الأب event.stopPropagation(); // هنا يمكنك تنفيذ أي عمليات أخرى ترغب في تنفيذها عند النقر على العنصر الابن });
3. ربط حدث النقر على العنصر الأب:
  بعد ذلك، يمكنك ربط حدث النقر على العنصر الأب لتنفيذ الإجراء المطلوب.
  
  javascript
  parentElement.click(function() { // هنا يمكنك تنفيذ الإجراء المطلوب عند النقر على العنصر الأب });
4. تنفيذ الإجراءات:
  يمكنك داخل كل من حدث النقر على العنصر الابن والعنصر الأب تنفيذ الإجراءات التي ترغب في تنفيذها. على سبيل المثال، عرض رسالة أو تنفيذ عملية.
من المهم أيضًا مراعاة أن stopPropagation() لن تمنع تنفيذ الأحداث الأخرى المرتبطة بالعنصر الحالي، فهي تمنع فقط انتشار الحدث إلى العناصر الأقدم في الهرم. لذلك، إذا كان هناك أي حدث مرتبط بالعنصر الابن بجانب الحدث الذي يمنع انتشاره، فسيتم تنفيذه أيضًا.
12/03/2024
4

Prevent Event Bubbling in React

لمنع تداول الحدث (event bubbling) في المكونات المتداخلة في React عند النقر (click)، يمكنك استخدام e.stopPropagation() في مكان الحدث onClick للعنصر الفرعي

. هذا سيمنع تداول الحدث إلى العنصر الأعلى

في مثالك، يمكنك تحديث الكود ليبدو كما يلي:

jsx
class List extends React.Component {
  constructor(props) {
    super(props);
  }

  handleClick() {
    // do something
  }

  render() {

    return (
      <ul 
        onClick={(e) => {
          console.log('parent');
          this.handleClick();
        }}
      >
        <li 
          onClick={(e) => {
            e.stopPropagation(); // منع تداول الحدث
            console.log('child');
            this.handleClick();
          }}
        >
        li>       
      ul>
    )
  }
}

بهذا التحديث، عند النقر على العنصر الفرعي

، سترى “child” فقط في الكونسول ولن ترى “parent”، مما يعني أن الحدث لم يتداول إلى العنصر الأعلى

تفادي تنفيذ حدث النقر على العنصر الأب عند النقر على العنصر الابن

المزيد من المعلومات

Prevent Event Bubbling in React

المزيد من المعلومات

أنت تستخدم إضافة Adblock