web-dev-qa-db-ja.com

HTML select要素が閉じられたときに起動するDOMイベントはありますか？

私は、開いている（ただし、オプションは変更されていない）選択要素が、ページ上のどこか（どこでも）選択要素をクリックして閉じられたときにJavaScriptでリッスンできるDOMイベントを探しています。

選択はフォーカスを保持するため、選択のblurイベントではありません。同様に、他の要素やドキュメントのfocusイベントでも、ウィンドウ、ドキュメント、または本文のmousedownまたはclickでもありません。

選択内のオプションは変更されていないため、選択のchangeイベントではありません。

従来のInternet Explorerについては心配していません。標準に準拠した最新のブラウザーで動作するものです。ただし、独自のハッキングは知っておく価値があります。

問題を示すためにJSFiddleを作成しました： http://jsfiddle.net/premasagar/FpfnM/

  1. [結果]パネルの選択ボックスをクリックします
  2. 「ここ」とマークされたテキスト（または他の場所）をシングルクリックでクリックし、ログにイベントが追加されているかどうかを確認します。最新のChromeまたはFirefoxにイベントはありません。

質問は次のとおりです：selectboxをクリックしてイベントを記録するために追加できるJavaScriptは何ですか？

（私はここで同様の、しかし異なる質問をしました：
iOS上のJavaScript：HTMLのselect要素を開く ）

javascriptjqueryhtmlhtml5dom
52
Premasagar

残念ながら、選択ボックスが閉じられているか開いているかを知るための標準的なイベントはありません。そのため、さまざまなブラウザーに対応するためのコードはかなり複雑になります。とはいえ、Firefoxでmouseupイベントを使用することで何かできるようになったと思います。

http://jsfiddle.net/FpfnM/50/

Firefox（および私はChromeを想定しています）では、その選択の状態をかなり慎重に追跡する必要があります。 escapeキーが押されたとき、またはblurイベントが発生したとき、状態を更新して、それが閉じていることを識別する必要があります。デモでは実装していませんが、選択をクリックする代わりにエスケープを押すとどうなるかを確認できます。

Safariの方が簡単でした。選択時のmousedownイベントは選択を開くことを示し、選択の終了はclickイベントによって示されます。

これらのイベントのいずれも起動しないブラウザを見つけた場合は、もう1つのトリックを試すことができます。 selectやtextareaなどのフォームウィジェットは、ブラウザ内ではなくOSによってレンダリングされることが多いため、それらと対話でき、特定のメッセージがブラウザのイベントハンドラに届かない可能性があります。選択ボックスが開いているときに、画面を覆う透明なテキスト領域を低いz-indexに配置すると、そのクローズクリックを追跡するために使用できる場合があります。ブラウザのDOM要素が見逃す可能性のあるイベントをキャプチャできる場合があります。

更新：Chromeページがクリックされると選択時にマウスダウンが表示され、ページがクリックされるとドキュメントにマウスアップが表示されるChromeで動作するバージョンは次のとおりです。

http://jsfiddle.net/FpfnM/51/

繰り返しますが、それぞれの正しい動作を処理するには、ブラウザーの検出を行う必要があります。特に、Chromeの問題の1つは、選択をクリックして閉じたときにイベントが発生しないことです。ただし、ページのクリックは検出できます。

クイックサマリー：

Chrome/Safari: select.mousedown on open, document.mouseup on close
Firefox: select.click on open, document.mouseup on close
IE8/IE7: select.click on open, document.mouseup on close

閉じるを意味する他のイベント（エスケープキー押下、ぼかしなど）には非常に多くのEdgeケースがありますが、これらはユーザーが選択ボックスをクリックしてからドキュメント領域をクリックするシナリオを処理するための最小限のものです。

お役に立てれば！

30
Jason Striegel

ドロップダウンが1つ以上ある場合：

        $("select").each(function () {
        var initDropdown = $(this);
        initDropdown.data("open", false);
        console.log(this.name + "   closed");

        initDropdown.on("blur", function () {
            var blurDdopdown = $(this);
            blurDdopdown.data("open", false);
            console.log(this.name + "   closed");
        });
    });

    $("select").bind("click", function () {
        var clickedDropdown = $(this);

        if (clickedDropdown.data('open') == false) {
            clickedDropdown.data('open', true);
            console.log(this.name + "   open");
        } else {
            clickedDropdown.data('open', false);
            console.log(this.name + "   closed");
        }
    });
2
Bogdan

私の最初の本能は、これを達成するための方法で少し回り道です。それは、外でプレスで（カスタム）ドロップダウンメニューを閉じるために通常使用するコードを使用することです：

_function clickInBody(){
 functionToCallOnBlur();
}

function clickInBodyStop(event){
    event.stopPropagation();
}
_

次に、bodyタグにonClick="clickInBody()"を追加し、選択項目にonClick="clickInBodyStop(event)"を追加します。これは、ページをクリックするたびにイベントを呼び出す必要がありますが、selectタグをクリックすると、functionToCallOnBlur()を呼び出さずに伝播が停止します

1
Tomas

JSFiddleの指示に従って、以下のイベントを受け取りました。

BODY, mousedown, STRONG
#document, mousedown, STRONG
window, mousedown, STRONG
SELECT, blur, SELECT
BODY, click, STRONG
#document, click, STRONG
window, click, STRONG

これらはすべて、選択メニューが既にフォーカスされ展開された後に「ここ」をクリックしたときにトリガーされたイベントです。これはChromeの最新バージョンにありました。

これらのどれもあなたの目的には十分ではありませんか？

編集：フォーカスを失っているのがSelect要素であることを確認する場合は、グローバルJavaScript変数「selectFocused」を設定し、Falseに設定します。選択メニューがフォーカスを受け取ったときにTrueに設定し、上記のイベントのいずれかが発生したときにFalseに設定します。 「selectFocused」をコードの任意の場所で使用して、Select要素に現在フォーカスがあるかどうかを検出できるようになりました。値が変更されると、Select要素が選択または選択解除されていることがわかります。

1
sichinumi

前提条件：using jQuery！これはおそらく問題の一部のみを解決しますが、要素をクリックして起動するイベントを探している場合は、オーバーレイdivを使用できます。

ユーザーが選択ボックスをクリックすると：

$('#mySelectBox').click(function () {
    var myOverlayDiv = $('<div id="overlayDiv" class="overlayDiv"></div>')
    .click(function () {
        // call your "select lost focus" function here
        // which should include $('#overlayDiv').remove() somewhere!
    })
    .show()
    .appendTo(document.body);
});

オーバーレイdivのスタイル：

.overlayDiv {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
opacity:0;
z-index:1000;
}

ユーザーがメニューをクリックすると、オーバーレイdivではなくメニューが表示されるように、選択ボックスメニューがより高いZインデックスであることを確認する必要があります。

1
jbabey

選択ボックスの外側をクリックすることを検討する場合、選択イベントの終了のシグナルになる可能性があります。

次のjQueryでこれを実行できます。 ここ はフィドルのコードです

$(function () {
    let flag = 0;

    $("#selectId").click(function (e) {
        e.stopPropagation();
        if (flag === 0) {
            flag = 1;
            $(document).one("click", function () {
                flag = 0;
                alert("select end");
            });
        }
    });
});

HTMLコード：

<select multiple id="selectId">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
0
yuxin Zhang