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

プレマサガー:

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

blur選択はフォーカスを保持するため、選択イベントではありません同様に、そうではありませんfocus、他の要素または文書、あるいはいくつかのイベントmousedownclick窓、文書または身体上。

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

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

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

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

だから質問は:どのJavaScriptを追加すれば、selectboxをクリックしたときにイベントをログに記録できるでしょうか?

(私はここで同様の質問をしました:
iOS上のJavaScript:HTML選択要素を開く

Jason Striegel:

残念ながら、選択ボックスが閉じているか開いているかを知るための標準イベントはありません。そのため、コードは、さまざまなブラウザーに対応するためにかなり複雑になります。とは言っても、それは可能だと思います。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

終了を意味する他のイベント(エスケープキープレス、ぼかしなど)には、非常に多くのエッジケースがありますが、これらは、ユーザーが選択ボックスをクリックしてから、ドキュメント領域をクリックしてオフにするシナリオを処理するための最低限のものです。 。

お役に立てれば!

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

HTML要素で発生する可能性のあるイベントのリストはどこにありますか?

分類Dev

内部 HTML が DOM ツリーに完全にレンダリングされた後に発生するイベントはどれですか?

分類Dev

HTML5DragNDrop-ドロップイベントが発生することはありません

分類Dev

要素がページに存在するとすぐに、イベントハンドラーをHTML要素にアタッチする方法はありますか?

分類Dev

イベントが発生したときにHTMLキャンバス画像からオーバーレイ効果を削除する方法

分類Dev

HTMLチェックボックスがオフになったときにJavaScriptでイベントをトリガーする方法はありますか?

分類Dev

Webページからスクレイピングするとき、htmlは要素を検査するときと同じではありませんか?

分類Dev

イベントが発生したときにHTMLコンテンツをWebページに表示する

分類Dev

特定のHTML要素が自動的に削除されたときにイベントをトリガーするにはどうすればよいですか?

分類Dev

テキスト ボックスで html タグと要素を使用するとエラーが発生します: 潜在的に危険な Request.Form 値がクライアントから検出されました

分類Dev

ブートストラップまたはジョブから呼び出されたときにエラーが発生するgrails3メールプラグインのhtmlビュー

分類Dev

ブラウザのタブまたはウィンドウが閉じたときに発生する一般的なイベントはありますか?

分類Dev

HTMLインポートの読み込みが完了すると、イベントが発生しますか?

分類Dev

新しい子がhtml要素に表示されたときにイベントをトリガーします

分類Dev

カーソルが他のHTML要素の後ろに隠れているときにmouseenterイベントを発生させる方法は?

分類Dev

動的に作成されたHTMLにonclickイベントを追加すると、エラーが発生しました:Uncaught SyntaxError:予期しない識別子

分類Dev

入力しているときに、zshにはhtml入力フィールドのような同様のonchangeイベントがありますか?

分類Dev

HTMLが縮小されたときに、リストアイテム間に空白を強制する有効な方法はありますか?

分類Dev

複数の異なるHTML要素が異なる要素である場合、それらは同じIDを持つことができますか?

分類Dev

選択したテキストのHTMLを取得しようとしたときに、ブラウザがタグを自動的に開いたり閉じたりしないようにするにはどうすればよいですか?

分類Dev

2方向にバインドされた配列を並べ替えると、HTML要素が並べ替えられ、誤ったコントロールフォーカスが発生します

分類Dev

2つのHTMLイベントの発信元が同じであると判断する方法(そして「イベントはすでに処理されている」と判断する方法)

分類Dev

あなたがあなたのウェブサイトのあなたのページの1つを訪問するとき、それが.htmlを持っていないようにあなたはそれをどのように作りますか

分類Dev

画像と同じサイズで読み込まれたHTML要素は、DOMリフローを回避するのに役立ちますか?

分類Dev

HTMLリストにアイコンとテキストを適用するとインデントの問題が発生します。アイテムを適切にインデントするにはどうすればよいですか?

分類Dev

イベントが発生したときに、HTML5キャンバスグラフィック(Arc)のサイズを取得します

分類Dev

Word文書が閉じられたときにトリガーされるVBAイベントはありますか?

分類Dev

DOM要素とHTML要素の間には常に1対1の関係がありますか?

分類Dev

JavaScriptでイベントを発生させたhtmlオブジェクトへの参照を取得するにはどうすればよいですか?

Related 関連記事

  1. 1

    HTML要素で発生する可能性のあるイベントのリストはどこにありますか?

  2. 2

    内部 HTML が DOM ツリーに完全にレンダリングされた後に発生するイベントはどれですか?

  3. 3

    HTML5DragNDrop-ドロップイベントが発生することはありません

  4. 4

    要素がページに存在するとすぐに、イベントハンドラーをHTML要素にアタッチする方法はありますか?

  5. 5

    イベントが発生したときにHTMLキャンバス画像からオーバーレイ効果を削除する方法

  6. 6

    HTMLチェックボックスがオフになったときにJavaScriptでイベントをトリガーする方法はありますか?

  7. 7

    Webページからスクレイピングするとき、htmlは要素を検査するときと同じではありませんか?

  8. 8

    イベントが発生したときにHTMLコンテンツをWebページに表示する

  9. 9

    特定のHTML要素が自動的に削除されたときにイベントをトリガーするにはどうすればよいですか?

  10. 10

    テキスト ボックスで html タグと要素を使用するとエラーが発生します: 潜在的に危険な Request.Form 値がクライアントから検出されました

  11. 11

    ブートストラップまたはジョブから呼び出されたときにエラーが発生するgrails3メールプラグインのhtmlビュー

  12. 12

    ブラウザのタブまたはウィンドウが閉じたときに発生する一般的なイベントはありますか?

  13. 13

    HTMLインポートの読み込みが完了すると、イベントが発生しますか?

  14. 14

    新しい子がhtml要素に表示されたときにイベントをトリガーします

  15. 15

    カーソルが他のHTML要素の後ろに隠れているときにmouseenterイベントを発生させる方法は?

  16. 16

    動的に作成されたHTMLにonclickイベントを追加すると、エラーが発生しました:Uncaught SyntaxError:予期しない識別子

  17. 17

    入力しているときに、zshにはhtml入力フィールドのような同様のonchangeイベントがありますか?

  18. 18

    HTMLが縮小されたときに、リストアイテム間に空白を強制する有効な方法はありますか?

  19. 19

    複数の異なるHTML要素が異なる要素である場合、それらは同じIDを持つことができますか?

  20. 20

    選択したテキストのHTMLを取得しようとしたときに、ブラウザがタグを自動的に開いたり閉じたりしないようにするにはどうすればよいですか?

  21. 21

    2方向にバインドされた配列を並べ替えると、HTML要素が並べ替えられ、誤ったコントロールフォーカスが発生します

  22. 22

    2つのHTMLイベントの発信元が同じであると判断する方法(そして「イベントはすでに処理されている」と判断する方法)

  23. 23

    あなたがあなたのウェブサイトのあなたのページの1つを訪問するとき、それが.htmlを持っていないようにあなたはそれをどのように作りますか

  24. 24

    画像と同じサイズで読み込まれたHTML要素は、DOMリフローを回避するのに役立ちますか?

  25. 25

    HTMLリストにアイコンとテキストを適用するとインデントの問題が発生します。アイテムを適切にインデントするにはどうすればよいですか?

  26. 26

    イベントが発生したときに、HTML5キャンバスグラフィック(Arc)のサイズを取得します

  27. 27

    Word文書が閉じられたときにトリガーされるVBAイベントはありますか?

  28. 28

    DOM要素とHTML要素の間には常に1対1の関係がありますか?

  29. 29

    JavaScriptでイベントを発生させたhtmlオブジェクトへの参照を取得するにはどうすればよいですか?

ホットタグ

アーカイブ