فهم الفرق بين أحداث تمرير الماوس وإدخال الماوس

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

تمرير الماوس

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

Mouseenter

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

متى يتم استخدام كل حدث

الاختيار بين الاستخدام يعتمد تمرير الماوس وإدخال الماوس على متطلباتك المحددة:

• استخدم تمرير الماوس عندما تريد إطلاق حدث في كل مرة يتحرك فيها المؤشر داخل حدود عنصر أو نسله. يعد هذا مفيدًا لمهام مثل تمييز عنصر أو عرض تلميح أداة.
• استخدم mouseenter عندما تريد إطلاق حدث فقط عندما يدخل المؤشر في البداية إلى عنصر. يمكن استخدام هذا لتتبع تفاعلات المستخدم، مثل عندما يقوم المستخدم بالتمرير فوق عنصر قائمة التنقل.

مثال

خذ بعين الاعتبار الكود التالي:

$("div.overout") .mouseover(وظيفة() { // حدث تم تشغيله عند تمرير الماوس وداخل العنصر المتداخل }) .mouseout(وظيفة() { // يتم تشغيل الحدث عندما يترك الماوس العنصر الرئيسي }); $("div.enterleave") .mouseenter(وظيفة() { // يتم تشغيل الحدث فقط عندما يدخل الماوس إلى العنصر الرئيسي }) .mouseleave(وظيفة() { // يتم تشغيل الحدث عندما يترك الماوس العنصر الرئيسي });

$("div.overout")
  .mouseover(function() {
    // Event triggered for mouseover and within the nested element
  })
  .mouseout(function() {
    // Event triggered when mouse leaves the main element
  });

$("div.enterleave")
  .mouseenter(function() {
    // Event triggered only when mouse enters the main element
  })
  .mouseleave(function() {
    // Event triggered when mouse leaves the main element
  });