onclick（）およびonblur（）の順序付けの問題
カスタムドロップダウンメニューを表示する入力フィールドがあります。次の機能が必要です。 ユーザーが入力フィールドの外側をクリックすると、メニューが削除されます。 場合は、より具体的には、メニュー内のdiv要素をユーザーがクリックすると、メニューを削除する必要があり、かつ特別な処理がクリックされたdiv要素に基づいて行うべきです。 これが私の実装です： 入力フィールドには、ユーザーが入力フィールドの外をクリックしたときにonblur()メニューを削除する（その親innerHTMLを空の文字列に設定する）イベントがあります。メニュー内のdivにはonclick()、特別な処理を実行するイベントもあります。 問題はonclick()、入力フィールドonblur()が最初に起動され、onclick()s を含むメニューが削除されるため、メニューがクリックされたときにイベントが起動しないことです。 メニューのdiv onclick()をonmousedown()とonmouseup()イベントに分割し、マウスダウン時にグローバルフラグを設定することで問題を解決しました。このフラグは、この回答で提案されているものと同様です。のonmousedown()前onblur()に起動するためonblur()、メニューdivの1つがクリックされた場合はフラグが設定されますが、画面の他の場所がクリックされた場合は設定されません。メニューがクリックされた場合は、メニューonblur()を削除せずにすぐに戻り、が起動するのを待ちonclick()ます。その時点で、メニューを安全に削除できます。 よりエレガントな解決策はありますか？ コードは次のようになります。 <div class="menu" onmousedown="setFlag()" onmouseup="doProcessing()">...</div> <input id="input" onblur="removeMenu()" ... /> var mouseflag; function setFlag() { mouseflag = true; } function removeMenu() { if (!mouseflag) { document.getElementById('menu').innerHTML = ''; } } function doProcessing(id, name) { mouseflag = false; ... }