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;
    ...
}

私はあなたとまったく同じ問題を抱えていました、私のUIはあなたが説明するとおりに設計されています。onClickメニュー項目のをに置き換えるだけで問題が解決しましたonMouseDown。私は他に何もしませんでした。いいえonMouseUp、フラグはありません。これにより、追加の作業なしで、ブラウザーにこれらのイベントハンドラーの優先度に基づいて自動的に再配列させることで問題が解決しました。

これでもうまくいかなかった理由はありますか？

onClickで置き換えないでくださいonMouseDown。

このアプローチはいくらか機能しますが、2つは根本的に異なるイベントであり、ユーザーの目には異なる期待があります。この場合、のonMouseDown代わりにonClickを使用すると、ソフトウェアの予測可能性が損なわれます。したがって、2つのイベントは交換できません。

例として、誤ってボタンをクリックした場合、ユーザーはマウスクリックを押したまま要素の外にカーソルをドラッグし、マウスボタンを離すと、最終的にアクションが実行されなくなると考えています。onClickこれを行います。onMouseDownユーザーがマウスを押し続けることを許可せず、代わりにユーザーに頼ることなく、ただちにアクションをトリガーします。onClickコンピューターでアクションをトリガーするために使用する標準です。

この状況でevent.preventDefault()は、onMouseDownイベントを呼び出します。onMouseDownデフォルトではぼかしイベントが発生し、preventDefaultが呼び出された場合は発生しません。その後、onClick呼び出される機会があります。ぼかしイベントは、の後でのみ発生しonClickます。

すべての後、onClickイベントはの組み合わせですonMouseDownとonMouseUp、彼らの両方が同じ要素内に発生した場合と場合にのみ、。

置き換えonmousedownてonfocus。したがって、このイベントは、フォーカスがテキストボックス内にあるときにトリガーされます。

置き換えonmouseupてonblur。テキストボックスからフォーカスを外すと、onblurが実行されます。

これはあなたが必要とするかもしれないものだと思います。

更新：

関数onfocusを実行するとき-> onblurに適用するクラスを削除し、onfocusで実行するクラスを追加します。

そして

関数onblurを実行するとき-> onfocusで適用するクラスを削除し、onblurで実行するクラスを追加します。

フラグ変数は必要ないようです。

更新2：

onmouseoutおよびonmouseoverのイベントを使用できます

onmouseover-カーソルが上にあることを検出します。

onmouseout-カーソルが離れたときを検出します。

よりエレガントな（ただし、パフォーマンスが低下する可能性が高い）ソリューション：

その代わり、メニュー、使用削除するには、入力のonBlurイベントを使用してのdocument.onclick後に発射し、onblur。

ただし、これは、入力自体をクリックするとメニューが削除されることも意味し、これは望ましくない動作です。input.onclickwith event.stopPropagation()を設定して、クリックがドキュメントクリックイベントに伝播しないようにします。

onfocusでonclickを変更する

onblurとonclickがうまくいかない場合でも、明らかにonfocusとyes onblurです。メニューが閉じられた後でも、onfocusは内部でクリックされた要素に対して有効です。

私はそうしました、そしてそれはうまくいきました。

次のようにsetInterval、onBlurハンドラー内で関数を使用できます。

<input id="input" onblur="removeMenu()" ... />

function removeMenu() {
    setInterval(function(){
        if (!mouseflag) {
            document.getElementById('menu').innerHTML = '';
        }
    }, 0);
}

setIntervalこの関数は、あなたの削除されonBlur ます0に設定した時間、この関数はすぐに終了し、他のイベントハンドラの後に呼び出されますので、追加し、コールスタックから機能を実行