وصف المشكلة
آمل أنه عندما ينتقل الماوس إلى ID1 ، سيتم عرض ID2 ، وعندما يترك الماوس ID1 ، سيتم عرض ID2. الأسئلة كما يلي:
1. عندما ينتقل الماوس من ID1 إلى ID2 ، يتغير المعرف من الشاشة إلى عدم العرض ، ثم يتغير إلى العرض
2. عندما ينتقل الماوس من ID2 إلى ID1 ، يصبح عرض ID2 غير مشدود ، ثم يصبح عرضًا
ما أريده هو أنه عندما يتحرك الماوس على ID1 أو ID2 ، سيستمر ID2 في الظهور دون تغيير.
<script type = "text/javaScript" src = "https://code.jquery.com/jquery-1.12.4 type = "text/javaScript"> $ ("#id1"). mouseover (function () {$ (this) .Children (). fadein (1000) ؛}). mouseout (function () {$ (this) .Children ()حل المشكلة
كان تحليل المشكلة الأولي أنه عندما انتقل الماوس من ID1 إلى ID2 ، والماوس الذي تركه من ID2 إلى ID1 ، وتم تشغيل حدث ماوس من أجل ID1 ، وبالتالي أصبح عرض ID2 غير مسبب. ثم انتقل الماوس إلى ID2 ، وتم تشغيل حدث Mouseover على ID2. نظرًا لآلية الفقاعة ، قبل أن يتم تشغيل الفأر على ID2 إلى ID1 ، تم تشغيل حدث Mouseover على ID1 ، ثم تم تغيير ID2 من عدم العرض إلى العرض. وبالمثل ، عندما ينتقل الماوس من ID2 إلى ID1 ، يتم تشغيل حدث الماوس لـ ID2. أم أنه بسبب آلية الفقاعة التي يتم نقل حدث الفأر إلى ID1 ، ويتغير ID2 من العرض إلى غير الانتشار. ثم قبل انتقال الماوس إلى ID1 ، يتم تشغيل حدث Mouseover ، ثم لا يتم عرض ID2 لعرضه.
يبدو أن المشكلة أعلاه تحتاج إلى حل عن طريق منع الماوس من ID1 عندما ينتقل الماوس من ID1 إلى ID2 ؛ عندما ينتقل الماوس من ID2 إلى ID1 ، يمنع الماوس من ID2 من ID2 إلى ID1 ، مما يمنع الماوس من ID2 من الفقاعات فوق ID1. ثم لا يمكن حل المشكلة فقط عن طريق منع الفقاعات.
لحل مثل هذه المشكلات ، يوفر jQuery أساليب Mouseenter و MouseLeave. لذلك يتم تغيير رمز JS إلى ما يلي ، والذي حل المشكلة بشكل جيد للغاية.
$ ("#id1"). mouseenter (function () {$ (this) .Children (). fadein (1000) ؛}). mouseLeave (function () {$ (this) .Children (). fadeout (1000) ؛}) ؛تقدم العديد من الأماكن Mouseenter و MouseLeave و Mouseover و Mouseout ، لذلك قمت بنسخها ولصقها.
/**************************************************/
1.Mouseover و Mouseenter
يتم تشغيل حدث Mouseover بغض النظر عما إذا كان مؤشر الماوس يمر عبر العنصر المحدد أو عنصره الفردي.
لن يتم تشغيل حدث Mouseenter إلا عندما يمر مؤشر الماوس عبر العنصر المحدد.
2.Mouseout و MouseLeave
سيتم تشغيل حدث Mouseout بغض النظر عما إذا كان مؤشر الماوس يترك العنصر المحدد أو أي عنصر طفل.
لن يتم تشغيل حدث MouseLeave إلا عندما يترك مؤشر الماوس العنصر المحدد.
/**************************************************/
هذه الظاهرة هي في الواقع هذه الظاهرة ، لكن العملية غامضة بعض الشيء. ما يلي على النحو التالي:
عندما ينتقل مؤشر الماوس إلى العنصر المحدد ، سيتم تشغيل حدث Mouseover. يعلم الجميع أنه عندما ينتقل مؤشر الماوس من العنصر المحدد إلى العنصر الفردي ، سيتم تشغيل حدث الماوس للعنصر المحدد أولاً ، ثم يتم حدوث حدث Mouseover للعنصر الطفل إلى العنصر المحدد. في هذا الوقت ، يعادل العنصر المحدد أولاً تنفيذ حدث ماوس ، ثم تنفيذ حدث Mouseover.
للتحقق ، قم بتغيير الرمز إلى ما يلي
<script type = "text/javaScript" src = "https://code.jquery.com/jquery-1.12.4 type = "text/javaScript"> $ ("#id1"). mouseover (function () {// $ (this) .Children (). fadein (1000) ؛ console.log ('a') ؛}). mouseout (function () {// $ (this) .Children (). fadeout (1000) ؛انقل الماوس من الصفحة إلى ID1 ، ثم انتقل من ID1 إلى ID2 ، واتجاع وحدة التحكم هو كما يلي
يمكن ملاحظة أن ID1 قد أطلق على أحداث Mouseover و Mouseout و Mouseover ، والتي هي بالضبط نفس الأحداث التي تم تحليلها أعلاه.
تحليل تنفيذ Mouseenter و MouseLeave
تحليل المبدأ
من التحليل أعلاه ، يمكننا أن نرى أنه لتحقيق تأثير Mouseenter و MouseLeave ، عندما ينتقل الماوس من العنصر المحدد إلى عنصر طفله ، لا يقوم العنصر المحدد بتنفيذ حدث Mouseout ، كما أنه لا ينفذ حدث Mouseover الذي يقوم به فقاعات الفئة الفرعية. عندما ينتقل الماوس من عنصر طفل العنصر المحدد إلى العنصر المحدد ، فإن العنصر المحدد لا ينفذ حدث Mouseover ، كما أنه لا ينفذ حدث Mouseout الذي تقوم به فقاعات الفئة الفرعية.
لتحقيق التأثير أعلاه ، نحتاج إلى سمة ذات صلة بكائن الحدث ، والذي يتم استخدامه للحكم على سمات العقد ذات الصلة للعقد المستهدفة للماوس و Mouseout. ببساطة ، عندما يتم تشغيل حدث Mouseover ، تمثل سمة RelationTarget العقدة التي تركتها الماوس للتو ، وعندما يتم تشغيل حدث ماوس ، فإنه يمثل الكائن الذي ينتقل إليه الماوس. نظرًا لأن MSIE لا تدعم هذه الخاصية ، فقد استبدلت خصائص ، وهي Fromelement و Toelement. بالإضافة إلى ذلك ، نحتاج أيضًا إلى طريقة تحتوي على ما إذا كان الكائن موجودًا في كائن آخر.
وبهذه الطريقة ، عندما يتحرك الماوس ، تحتاج إلى الحكم على ما يلي
1. اتصل بـ Mouseover ، تحتاج فقط إلى تحديد ما إذا كان RelationTarget هو عنصر طفل للعنصر المحدد. إذا كان الأمر كذلك ، فلن يتم تنفيذه (عند الانتقال من عنصر الطفل المحدد إلى العنصر المحدد ، فلن يتم تنفيذ Mouseover ؛ عند الانتقال من العنصر المحدد إلى عنصر الطفل المحدد ، لن يتم تنفيذ Mouseover الفقاعة) ؛
2. اتصل على mouseout ، تحتاج فقط إلى تحديد ما إذا كان يتم تحديد العنصر الفردي في RelationTarget. إذا كان الأمر كذلك ، فلن يتم تنفيذه (عند الانتقال من عنصر الطفل المحدد إلى العنصر المحدد ، لا يتم تنفيذ الماوس من العنصر الطفل ؛ عند الانتقال من العنصر المحدد إلى عنصر الطفل المحدد ، لم يتم تنفيذ الماوس) ؛
عملية التنفيذ
تحديد ما إذا كانت هناك علاقة إدراج بين عنصرين
يتم تغليف وظيفة تحتوي على jQuery على النحو التالي
يمكن تبسيطه على النحو التالي
// احكم على ما إذا كان الاثنان A يحتوي على bfunction يحتوي على (a ، b) {return A.Contains؟ a! = b && a.contains (b): !!مقدمة في المقارن
هذه الطريقة هي جزء من مواصفات DOM Level 3 ، مما يتيح لك تحديد الموضع المتبادل بين عقد DOM 2. هذه الطريقة أقوى من .contains (). أحد التطبيقات المحتملة لهذه الطريقة هو فرز عقد DOM إلى ترتيب مفصل ودقيق. تم وصف المعلومات التي تم إرجاعها بواسطة nodea.comparedocumentPosition (NODEB) على النحو التالي:
معنى عدد البت
من خلال ما سبق ، يمكننا أن نفهم لماذا يجب أن نكتبها على أنها A.MomparedocumentPosition (ب) و 16 لأنه إذا كانت العقدة A تحتوي على العقدة B ، فسيتم إرجاع 16 ، 16 و 16 = 1 ، وستكون النتائج 0 في حالات أخرى.
الحصول على RelationTarget من أجل التوافق
من أجل أن تكون متوافقة مع المتصفحات المختلفة ، راجع رمز مصدر jQuery ، اكتب الرمز التالي للحصول على السمات المتعلقة بعقد مستهدف Mouseover و Mouseout.
الوظيفة getReled (e) {var stander ؛ var type = }تحسين Mouseover و Mouseout
تحسين Mouseover و Mouseout لتحقيق تأثيرات Mouseenter و MouseLeave المحسنة ، جميع الرموز هي كما يلي.
<! doctype html> <html> <head> <title> </title> </head> </head> <body> <div id = "id1"> <div id = "id2"> </viv> </viv> <script type = "text/javaScript" src = "https://code.jquery.com type = "text/javaScript"> // upply ما إذا كان اثنان A يحتوي على bfunction يحتوي على (a ، b) {return a.contains؟ a! = b && a.contains (b): !! (a.momparedocumentPosition (b) & 16) ؛} وظيفة getReled (e) {var arside ؛ var type = if (type = 'mouseout') {ذات الصلة = e.ReledTarget || } $ (function () {$ ("#id1"). mouseover (الوظيفة (e) {// الدفاع عن المكان الذي ينتقل فيه الماوس إلى id1 var arely = getReled (e) ؛ يتم تنفيذها إذا (this! = stired &&! يحتوي على (هذا ، ذات الصلة)) {console.log ('mouseover') ؛}}). mouseout (الوظيفة (e) {// judge حيث يجب أن ينتقل الماوس من id1؟ var ذات الصلة = getReled (e) ؛ العنصر ، لا يتم تنفيذ أي عملية ، وإلا يتم تنفيذ العملية المقابلة إذا (this! = related &&! تحتوي على (هذا ، ذات الصلة)) {console.log ('mouseout') ؛}}) ؛}) ؛ </script> </body> </html>اختبار ، مسار حركة الماوس كما هو موضح في الرسم البياني التالي
كما يتضح من وحدة التحكم ، فإن Mouseover و Mouseout في هذه اللحظة قد تم تجهيزها بالكامل من آثار Mouseenter و MouseLeave.
تغليف الكود
إذا كنت بحاجة إلى تحميل jQuery أو كتابة العديد من الممثلين في كل مرة تقوم فيها بمثل هذه العملية ، فستكون مهمة مملة. من أجل تسهيل العمليات المستقبلية ، يتم تنفيذ العبوة المناسبة ، ومحاكاة jQuery ، وتوليد ماوسك و mouseleave. يتم تغليف الرمز في ملف dqmouse.js ، على النحو التالي:
(function (w) {var dqmouse = function (obj) {// function body return new dqmouse.fn.init (obj) ؛} dqmouse.fn = dqmouse.prototype = {// Extended Optype Object Obj: null ، dqmouse: "1.0.0" ، init: function هذا ؛} ، يحتوي على: function (a ، b) {return a.contains؟ if (type == 'mouseover') {ذات الصلة = e.ReledTarget || ذات الصلة = _self.getReled (e) ؛ !الملف المصدر يسمى كما يلي:
<div id = "id1"> <div id = "id2"> </viv> </viv> <script type = "text/javaScript" src = "dqmouse.js id1 = document.getElementById ('id1') ؛ $$ (id1) .over (function () {console.log ('mouseover') ؛}). Out (function () {console.log ('mouseout') ؛}) ؛ </script>ما سبق هو المحتوى ذي الصلة حول كيفية حل مشكلة Mouseover و Mouseout التي تسبب عدة مرات في JS التي قدمها لك المحرر. آمل أن يكون ذلك مفيدًا للجميع!