SINAホームページの検索ボックスにAJAXを使用したドロップダウンボックスがあります。ドロップダウンボックスにクリックアイテムを実装して、検索ボックスの値をこのアイテムにする必要があり、ドロップダウンボックスが消えますが、同時に、他の場所をクリックすると、ドロップダウンボックスも消えます。図に示されているように：
OnblurとOnclickを使用してドロップダウンボックスを非表示にしますが、大きな問題が発生します。これらの2つの機能は競合します。 Onblurは強すぎて、OnClickメソッドを実装する機会はありません。検索ボックスは、クリックアイテムのコンテンツを取得できません。これは、私たちが解決したいOnclickおよびOnblurの競合の問題です。
この問題については、2つのソリューションを紹介します。
1. Settimeoutを使用してOnblur時間の実行を遅らせ、OnClickの実行後にOnblurを実行します。 （SettimeOutの時間設定は100msを超える必要があります。そうでなければ、それでも機能しません）例コードは次のとおりです。
<！doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </title> <style> *{margin：0;パディング：0;リストスタイル：なし; } form {width：500px;マージン：0 Auto;位置：相対;ズーム：1; } form：afted {clear：voth;コンテンツ： "";表示：ブロック; } .text {float：left;国境：1pxソリッド#cccccc;パディング左：14px;幅：300px;高さ：34px;ラインハイト：34px;フォントサイズ：14px; } .button {width：50px;高さ：34px;国境：1pxソリッド#cccccc;ラインハイト：34px;フォントサイズ：14px;色：#ffffff;背景：＃ff8400; } ul {position：absolute;トップ：36px;左：0;幅：300px;国境右：1PX SOLID #CCCCCC;国境左：1PX SOLID #CCCCCC;背景：緑;表示：なし; } li {font-size：14px;ラインハイト：34px;高さ：34px;色：＃000000;ボーダーボトム：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タイマー= null; otext.onfocus = function（）{this.value = ''; oul.style.display = 'block'; for（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 = setimeout（function（）{oul.style.display = 'none'; if（！otext.value）{otext.value = 'キーワードを入力してください;}}、120）; }; }; </script> </head> <body> <form> <入力タイプ= "テキスト"値= "キーワード" ID = "text"/> <入力タイプ= "value =" search "/> <ul id =" ul "> <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; } form：afted {clear：voth;コンテンツ： "";表示：ブロック; } .text {float：left;国境：1pxソリッド#cccccc;パディング左：14px;幅：300px;高さ：34px;ラインハイト：34px;フォントサイズ：14px; } .button {width：50px;高さ：34px;国境：1pxソリッド#cccccc;ラインハイト：34px;フォントサイズ：14px;色：#ffffff;背景：＃ff8400; } ul {position：absolute;トップ：36px;左：0;幅：300px;国境右：1PX SOLID #CCCCCC;国境左：1PX SOLID #CCCCCC;背景：緑;表示：なし; } li {font-size：14px;ラインハイト：34px;高さ：34px;色：＃000000;ボーダーボトム：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タイマー= null; otext.onfocus = function（）{this.value = ''; oul.style.display = 'block'; for（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> <form> <入力タイプ= "テキスト"値= "キーワード" id = "text"/> <入力タイプ= "value =" search "/> <ul id =" ul "> <li>ウィンドウが閉じられているかどうかを返す</li> <li </li> <li>ウィンドウの名前を設定または返します。 </li> <li>ウィンドウの外側の高さに戻ります。 </li> </ul> </form> </body> </html>OnClickとOnblurの上記の紛争問題に対する迅速な解決策は、私があなたと共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。