لقد تعرضت لحدث OnMouseover وحدث OnMouseout في اليومين الماضيين. اعتقدت دائمًا أنهم كانوا ببساطة يثيرون الأحداث عندما انتقل مؤشر الماوس إلى العنصر ويؤدي إلى حدوث أحداث عندما انتقل مؤشر الماوس من الكائن المحدد. لكنني وجدت فجأة أن هذه مجرد أوصاف بسيطة لهم. دعونا نلقي نظرة عليهم معًا بعد كل شيء ، بعد كل شيء ، لا يزال لديهم ميزات غريبة. هل هي جيدة أم سيئة؟
قم أولاً بتنفيذ مربع:
ربط حدث OnMouseover وحدث OnMouseout على هذا المربع
اكتشف أن لا شيء سيحدث لهم ، وبعد ذلك (هههه ، أنت تعرف!)
دعنا ننشئ عنصرًا B ، بحيث يتم التداخل في العنصر A كعنصر طفل في أ
ما زلنا نربط حدث OnMouseover وحدث OnMouseout فقط بعنصر الوالد الخارجي A. ماذا ستكتشف؟ نعم ، هذا صحيح! عندما ينتقل الماوس وإزالة العنصر B من A ، يحدث أيضًا حدث OnMouseover وحدث OnMouseout! ! لماذا؟ هذا ليس ما أريد! هل B ليس جزءًا من A في هذا الوقت؟ بالطبع لا ، وإلا فلن يحدث حدث OnMouseover عند نقل العنصر B. هذا يثبت أن العنصر ب لا يزال جزءًا لا يتجزأ من A.
ثم ما الذي يحدث؟ بعد كل شيء ، الحادث يرتكب خطأ؟ يعلم الجميع أن هناك نوعين من تدفقات الأحداث في المتصفحات الشائعة الاستخدام: فقاعات الأحداث والتقاط الأحداث. دعونا نلقي نظرة على تعريف فقاعات الأحداث: يتم نشر الأحداث خطوة بخطوة من هدف الحدث الأكثر تحديداً إلى هدف الحدث الأقل تحديدًا (كائن المستند). لذلك عندما ينتقل الماوس ويزيل عنصر الطفل B ، سيتم تشغيل حدث OnMouseover B و OnMouseout ، ولكنه لا يحتوي على هذين الحدثين ، لذلك يمرر هذين الحدثين إلى العنصر الأم A. A له هذين الحدثين ، وبالتالي فإن الموقف الذي نرى حدوثه.
سيقول بعض الناس كيفية تجنب ذلك. بعد كل شيء ، ليس كل شخص لديه هذا النوع من الطلب. نحتاج فقط إلى حدث العنصر الأصل للتشغيل ، والسماح للعنصر الطفل أن يكون بهدوء رجل وسيم.
لذلك يضيف W3C سمات ذات صلة في أحداث Mouseover و Mouseout:
• في حدث Mouseover ، يشير إلى العنصر الذي يأتي منه الماوس
• في حدث Mouseout ، يشير إلى العنصر الذي يذهب إليه الماوس
ومع ذلك ، أضافت Microsoft سمتين إلى أحداث Mouseover و Mouseout
• Fromelement ، في حدث Mouseover ، يشير إلى العنصر الذي يأتي منه الماوس
• ToElement ، العنصر الذي يشير إلى الماوس في حدث Mouseout
لذلك لدينا تنفيذ الكود التالي
document.getElementById ('box1'). onMouseover = function (e) {if (! e) e = window.event ؛ var reltg = e.ReledTarget؟ e.ReledTarget: e.fromelement ؛ بينما (reltg && reltg! = هذا) reltg = reltg.parentnode ؛ if (reltg! = this) {// هنا يمكنك كتابة رمز المعالجة ل onMouseenter الأحداث ('111') ؛}}}}}}} window.event ؛ var reltg = e.ReledTarget: e.toElement ؛ بينما (reltg && reltg! = هذا) reltg = reltg.parentnode ؛ if (reltg! = this) {// هنا يمكنك كتابة تنبيه رمز معالجة الأحداث onMouseLeave ('2222') ؛}}ما سبق هو فهم شامل لحادث OnMouseover وحادث onMouseout الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!