Rayden Storm نشر 22 مارس 2021 أرسل تقرير مشاركة نشر 22 مارس 2021 أواجه مشكلة غريبة ولا أفهم سببها وهي عند الضغط على العنصر li وكأنني أيضا ضغطت على ul أيضا import React from 'react'; export default function App() { return ( <ul onClick={(e) => { console.log('parent'); }} > <li onClick={(e) => { console.log('child1'); }} > list1 </li> <li onClick={(e) => { console.log('child2'); }} > item2 </li> </ul> ); } عند الضغط على list1 أجد child1 parent اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Mohammed Saber6 نشر 22 مارس 2021 أرسل تقرير مشاركة نشر 22 مارس 2021 هذا طبيعي فهذا ما يسمى بال event ولأن ال li عنصر داخلي لل ul فلذلك عند الضغط عليه سيمرر حدث ليقوم الأب بتنفيذ ال onClick الخاصة به ولكن إذا لم تكن تريد هذا وتريد منع وصول ال event من الطفل إلى الأب فقط قم بما يلي لعناصر ال li <li onClick={(e) => { e.stopPropagation(); // هذا السطر سيمنع مرور الحدث من الطفل إلى الأب console.log('child1'); }} > list1 </li> 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Yomna Raouf نشر 22 مارس 2021 أرسل تقرير مشاركة نشر 22 مارس 2021 في جافاسكريبت يوجد مصطلحين يسميان event bubbling و event capturing و هما طريقتين مختلفتين لل propagation في ال HTML DOM API، فعندما يقه أي حدث event على عنصر بداخل عنصر آخر و كلا العنصرين يتعاملان/يستمعان لهذا الحدث و يتخذان إجراء عند حدوثه. ال event propagation mode يحدد الترتيب الذي ستقوم العناصر باستلام الحدث به. ففي حالة ال bubbling، يتم التقاط الحدث و التعامل معه بواسطة العنصر الداخلي أولًا و بعدها يتم التقدم إلى العناصر الخارجية. أمّا في حالة ال capturing، فيتم التقاط الحدث و التعامل معه بواسطة العنصر الخارجي أولًا و بعدها يتم التقدم إلى العناصر الداخلية. و هذا ما يحدث بصورة افتراضية في js و لإيقاف هذا التأثير نقوم باستخدام الدالة التالية داخلة تابع التعامل مع الحدث: e.stopPropagation() اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
Rayden Storm
أواجه مشكلة غريبة ولا أفهم سببها وهي عند الضغط على العنصر li وكأنني أيضا ضغطت على ul أيضا
عند الضغط على list1 أجد
child1 parentرابط هذا التعليق
شارك على الشبكات الإجتماعية
2 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.