شرح تفصيلي لحل مشكلة التمرير المتوقف لصفحات تطبيق الويب

عندما يقوم متصفح الهاتف المحمول بتمرير الصفحة الحالية (وربما يقوم أيضًا بتكبير الصفحة)، يتم حظر السلوك الافتراضي، مما يتسبب في إجبار الصفحة على البقاء ثابتة، مما يؤدي إلى تجربة مستخدم سيئة وإحساس بالتوقف المؤقت عند تمرير الصفحة.

شرح أكثر تحديدًا: نظرًا لأن السمة القابلة للإلغاء لكائن حدث touchstart صحيحة، أي أنه يمكن للمستمع منع سلوكها الافتراضي من خلال طريقة منع الافتراضي (). لكن المتصفح لا يمكنه معرفة ما إذا كان المستمع سيستدعي المنع الافتراضي () كل ما يمكنه فعله هو الانتظار حتى ينتهي المستمع من التنفيذ قبل تنفيذ السلوك الافتراضي. يستغرق تنفيذ المستمع وقتًا طويلاً، بل إن بعضها يستغرق وقتًا طويلاً -استهلاك، الأمر الذي سيؤدي إلى تجميد الصفحة. حتى لو كان المستمع عبارة عن وظيفة فارغة، فسيحدث قدر معين من التأخير. بعد كل شيء، سيستغرق تنفيذ الوظيفة الفارغة وقتًا أيضًا.

المفهوم الأساسي: xxx.addEventListener('اسم الحدث', function(xxx){xxx}, useCapture).

تمثل المعلمة الأولى اسم الحدث (باستثناء النقرات)، وتمثل المعلمة الثانية وظيفة تلقي الحدث؛ والمعلمة الثالثة هي useCapture.

دعونا نلقي نظرة على ما يعنيه هذا الشيء، وسيكون من البديهي إعطاء مثال مباشرة.

 <div id=level1> <div id=level2> <div id=level3>الرجاء الضغط هنا</div> </div></div><div id=info></div> 

 فار المستوى 1 = document.getElementById(level1);فار المستوى2 = document.getElementById(level2);فار المستوى3= document.getElementById(level3);var info = document.getElementById(info);outDiv.addEventListener(click, function () { info.innerHTML +=level1 + <br> }, false);middleDiv.addEventListener(click, function () { info.innerHTML +=level2 + <br> }, false);inDiv.addEventListener(click, function () { info.innerHTML +=level3 + <br>; }, false);

وفقًا للكود أعلاه، دعونا نرى تأثير useCapture على أنه صحيح وخاطئ:

عندما تكون جميعها خاطئة، يكون ترتيب التشغيل هو: المستوى 3، المستوى 2، المستوى 1

عندما يكون كل شيء صحيحًا، يكون ترتيب التشغيل هو: المستوى 1، المستوى 2، المستوى 3

عندما يكون المستوى 1 صحيحًا والمستوى الآخر خطأ، يكون ترتيب التشغيل هو: المستوى 1، المستوى 3، المستوى 2

عندما يكون المستوى 2 صحيحًا والمستوى الآخر خطأ، يكون ترتيب التشغيل هو: المستوى 2، المستوى 3، المستوى 1

عندما يكون المستوى 3 صحيحًا والمستوى الآخر خطأ، يكون ترتيب التشغيل هو: المستوى 3، المستوى 2، المستوى 1

عندما يكون المستوى 1 خطأ والمستوى الآخر صحيحًا، يكون ترتيب التشغيل هو: المستوى 2، المستوى 3، المستوى 1

عندما يكون المستوى 2 خطأ والمستوى الآخر صحيحًا، يكون ترتيب التشغيل هو: المستوى 1، المستوى 3، المستوى 2

عندما يكون المستوى 3 خطأ والمستوى الآخر صحيحًا، يكون ترتيب التشغيل هو: المستوى 1، المستوى 2، المستوى 3

ويمكن استخلاص الاستنتاجات التالية من النتائج المذكورة أعلاه:

ترتيب الصواب يكون دائمًا قبل الخطأ؛

إذا كانت المضاعفات صحيحة، فسيتم تشغيل الطبقة الخارجية قبل الطبقة الداخلية؛

إذا كانت المتعددة خاطئة، فسيتم تشغيل الطبقة الداخلية قبل الطبقة الخارجية.

كيفية استخدامه

 addEventListener('اسم الحدث'، الوظيفة(xxx){xxx}، {التقاط: خطأ، سلبي: خطأ، مرة واحدة: خطأ})

الخصائص الثلاث كلها مفاتيح من النوع المنطقي، والقيم الافتراضية خاطئة.

الالتقاط: يعادل معلمة useCapture السابقة؛

مرة واحدة: يعني أن المستمع لمرة واحدة، وسيتم إزالته تلقائيًاEventListener بعد تنفيذه مرة واحدة؛

سلبي: يستخدم لأحداث اللمس لتطبيق الويب

من المفهوم أنه عندما تستخدم متصفحات الهاتف المحمول الأحداث، فإن 80% من مستمعي أحداث التمرير لا يمنعون السلوك الافتراضي، مما يعني أنه في معظم الحالات ينتظر المتصفح دون جدوى. لذلك، ولد المستمع السلبي يعني مطيعًا، مما يعني أنه لن يقول لا للسلوك الافتراضي للحدث. بمجرد أن يعرف المتصفح أن المستمع سلبي، يمكنه تنفيذ المستمع في خيطين في نفس الوقت كود JavaScript والسلوك الافتراضي للمتصفح.

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.