私は、JavaScriptでリッスンできるDOMイベントを探しています。開いている(ただしオプションは変更されていない)選択要素が、ページ上のどこか(どこでも)選択要素をクリックして閉じると、その要素が閉じられます。
blur
選択はフォーカスを保持するため、選択のイベントではありません。同様に、そうではありませんfocus
、他の要素または文書、あるいはいくつかのイベントmousedown
やclick
窓、文書または身体上。
change
選択内のオプションが変更されていないため、これは選択のイベントではありません。
私はレガシーInternet Explorerについては心配していません-規格に準拠した最新のブラウザで動作するものだけです。ただし、独自のハッキングは知っておく価値があります。
問題を示すためにJSFiddleを作成しました:http ://jsfiddle.net/premasagar/FpfnM/
だから質問は:どのJavaScriptを追加すれば、selectboxをクリックしたときにイベントをログに記録できるでしょうか?
(私はここで同様の質問をしました:
iOS上のJavaScript:HTML選択要素を開く)
残念ながら、選択ボックスが閉じているか開いているかを知るための標準イベントはありません。そのため、コードは、さまざまなブラウザーに対応するためにかなり複雑になります。とは言っても、それは可能だと思います。Firefoxでこのmouseup
イベントを使用して何かがうまくいきました。
Firefox(と私はChromeを想定しています)では、その選択の状態をかなり注意深く追跡する必要があります。escape
キーが押されたとき、またはblur
イベントが発生したときは、状態を更新して、閉じていることを識別する必要があります。私はデモでそれを実装していません。選択をクリックしてオフにするのではなく、エスケープを押すとどうなるかを確認できます。
Safariでは物事がより簡単になりましmousedown
た。選択のイベントは選択を開くことを示し、選択の終了はclick
イベントによって示されます。
これらのイベントが発生しないブラウザを見つけた場合は、さらに1つのトリックを試すことができます。selectやtextareaなどのフォームウィジェットは多くの場合OSによってレンダリングされ、ブラウザー内ではレンダリングされないため、それらを操作したり、特定のメッセージがブラウザーのイベントハンドラーに届かなかったりする可能性があります。選択ボックスが開いているときに、画面を覆う透明なテキスト領域をより低いz-indexに配置すると、そのクローズクリックを追跡できる可能性があります。ブラウザのDOM要素が見逃す可能性のあるイベントをキャプチャできる場合があります。
更新: Chromeでは、選択時にマウスダウンが表示され、選択時にページがクリックされたときにドキュメントが表示されます。Chromeで動作するバージョンは次のとおりです。
繰り返しになりますが、それぞれのブラウザで正しい動作を処理するには、ブラウザをいくつか検出する必要があります。特に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]
コメントを追加