يوجد مربع منسد يستخدم Ajax في مربع البحث على صفحة Sina الرئيسية. نحتاج إلى تنفيذ عنصر نقرة في المربع المنسدل لجعل القيمة في مربع البحث تصبح هذا العنصر ، ويختفي المربع المنسدلة ، ولكن في نفس الوقت ، عند النقر على أماكن أخرى ، سيختفي المربع المنسدلة أيضًا. كما هو مبين في الشكل:
نستخدم Onblur و Onclick لإخفاء الصندوق المنسدلة ، ولكن تنشأ مشكلة أكبر. هاتان الوظيفتان تتعارضان. Onblur قوي للغاية ولا توجد فرصة لتنفيذ طريقة Onclick. لا يمكن لمربع البحث الحصول على محتوى عنصر النقر. هذه هي مشكلة الصراع Onclick و Onblur التي نريد حلها.
لهذه المشكلة ، نقدم حلين:
1. استخدم setTimeout لتأخير تنفيذ وقت Onblur ، ثم تنفيذ Onblur بعد تنفيذ OnClick. (يجب أن يكون الإعداد الزمني لـ SetTimeout أعلى من 100 مللي ثانية ، وإلا فإنه لا يزال لا يعمل) رمز المثال هو كما يلي:
<! doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </title> <style> *{margin: 0 ؛ الحشو: 0 ؛ على غرار القائمة: لا شيء ؛ } form {width: 500px ؛ الهامش: 0 Auto ؛ الموقف: قريب التكبير: 1 ؛ } النموذج: بعد {clear: كلاهما ؛ محتوى: ""؛ العرض: كتلة ؛ } .text {float: left ؛ الحدود: 1px الصلبة #CCCCCC ؛ حشو اليسار: 14px ؛ العرض: 300 بكسل ؛ الارتفاع: 34 بكسل ؛ خط الارتفاع: 34px ؛ حجم الخط: 14px ؛ }. لكن العرض: 50px ؛ الارتفاع: 34 بكسل ؛ الحدود: 1px الصلبة #CCCCCC ؛ خط الارتفاع: 34px ؛ حجم الخط: 14px ؛ اللون: #ffffff ؛ الخلفية:#ff8400 ؛ } ul {position: Absolute ؛ أعلى: 36 بكسل ؛ اليسار: 0 ؛ العرض: 300 بكسل ؛ الحدود اليمين: 1 بكسل Solid #CCCCCC ؛ الحدود اليسرى: 1px الصلبة #CCCCCC ؛ الخلفية: الأخضر. العرض: لا شيء ؛ } li {font-size: 14px ؛ خط الارتفاع: 34px ؛ الارتفاع: 34 بكسل ؛ اللون:#000000 ؛ Border-Bottom: 1PX Solid #CCCCCC ؛ } li: hover {background: Yellow ؛ اللون: أحمر. المؤشر: مؤشر. } </style> <script> window.onload = function () {var otext = document.getElementById ('text') ؛ var oul = document.getElementById ('ul') ؛ var ali = oul.getElementsByTagname ('li') ؛ var timer = null ؛ otext.onfocus = function () {this.value = '' ؛ oul.style.display = 'block' ؛ لـ (var i = 0 ؛ i <ali.length ؛ i ++) {ali [i] .onclick = function () {cleartimeout (timer) ؛ otext.value = this.innerhtml ؛ oul.style.display = 'none' ؛ } ؛ }} ؛ otext.onblur = function () {timer = setTimeOut (function () {oul.style.display = 'none' ؛ if (! otext.value) {otext.value = 'الرجاء إدخال الكلمة الرئيسية' ؛}} ، 120) ؛ } ؛ } ؛ </script> </head> <body> <port> <input type = "text" value = "الرجاء إدخال الكلمة الرئيسية" id = "text"/> <input type = "button" value = "search"/> <ul id = "ul"> <li> إرجاع ما إذا كانت النافذة مغلقة </li> <li> إرجاع ارتفاع مساحة عرض المستندات </li> <li> </li> <li> تعيين أو إرجاع اسم النافذة. </li> <li> ارجع إلى الارتفاع الخارجي للنافذة. </li></ul> </form> </body> </html>2. استخدم document.onmousedown لاستبدال Onblur لتنفيذ وظيفة المنسدلة المخفية
<! doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </title> <style> *{margin: 0 ؛ الحشو: 0 ؛ على غرار القائمة: لا شيء ؛ } form {width: 500px ؛ الهامش: 0 Auto ؛ الموقف: قريب التكبير: 1 ؛ } النموذج: بعد {clear: كلاهما ؛ محتوى: ""؛ العرض: كتلة ؛ } .text {float: left ؛ الحدود: 1px الصلبة #CCCCCC ؛ حشو اليسار: 14px ؛ العرض: 300 بكسل ؛ الارتفاع: 34 بكسل ؛ خط الارتفاع: 34px ؛ حجم الخط: 14px ؛ }. لكن العرض: 50px ؛ الارتفاع: 34 بكسل ؛ الحدود: 1px الصلبة #CCCCCC ؛ خط الارتفاع: 34px ؛ حجم الخط: 14px ؛ اللون: #ffffff ؛ الخلفية:#ff8400 ؛ } ul {position: Absolute ؛ أعلى: 36 بكسل ؛ اليسار: 0 ؛ العرض: 300 بكسل ؛ الحدود اليمين: 1 بكسل Solid #CCCCCC ؛ الحدود اليسرى: 1px الصلبة #CCCCCC ؛ الخلفية: الأخضر. العرض: لا شيء ؛ } li {font-size: 14px ؛ خط الارتفاع: 34px ؛ الارتفاع: 34 بكسل ؛ اللون:#000000 ؛ Border-Bottom: 1PX Solid #CCCCCC ؛ } li: hover {background: Yellow ؛ اللون: أحمر. المؤشر: مؤشر. } </style> <script> window.onload = function () {var otext = document.getElementById ('text') ؛ var oul = document.getElementById ('ul') ؛ var ali = oul.getElementsByTagname ('li') ؛ var timer = null ؛ otext.onfocus = function () {this.value = '' ؛ oul.style.display = 'block' ؛ لـ (var i = 0 ؛ i <ali.length ؛ i ++) {ali [i] .onclick = function () {cleartimeout (timer) ؛ otext.value = this.innerhtml ؛ oul.style.display = 'none' ؛ } ؛ }} ؛ document.onmousedown = function (ev) {var oevent = ev || event ؛ var target = oevent.target || oevent.srcelement ؛ if (target.parentNode! == oul && target! == otext) {oul.style.display = 'none' ؛ }} ؛ otext.onblur = function () {if (! otext.value) {otext.value = 'الرجاء إدخال الكلمة الرئيسية' ؛ }} ؛ } ؛ </script> </head> <body> <porm> <input type = "text" value = "الرجاء إدخال الكلمة الرئيسية" id = "text"/> <input type = "button" value = "search"/> <ul id = "ul"> <li> إرجاع ما إذا كان قد تم إغلاق النوافذ </li> <li> إرجاع ارتفاع مساحة عرض المستندات </li> </li> <li> تعيين أو إرجاع اسم النافذة. </li> <li> ارجع إلى الارتفاع الخارجي للنافذة. </li></ul> </form> </body> </html>الحل السريع لمشكلة الصراع أعلاه المتمثلة في OnClick و Onblur هو كل المحتوى الذي أشاركه معك. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.