WIZ-CODE.blog

JavaScriptやAjaxをテーマとしたブログです。

*

IEのマウスイベントの挙動について

      2015/11/12

このInternet Explorer特有の不規則なマウスイベントは2015年11月現在、Internet Explorerの最新バージョンである11ですでに他のモダンブラウザと同じ挙動に修正されています。この問題はInternet Explorerのバージョン8以下で起こる現象です。
⇒検証しているサイト http://www.quirksmode.org/dom/events/click.html
以前からIEのマウスイベントは他のブラウザと何か違うと思うことがあり、実際に実装面で困ることになったので、ここでマウスイベントの発生の仕方について簡単にまとめることにしました。 マウスイベントで、IEとその他のブラウザで明らかに異なる挙動となるのはダブルクリック時です。通常のDOM準拠ブラウザではダブルクリックをした際(マウスダウン、マウスアップをすばやく2回繰り返す)、次のような順序でイベントが発生します。 DOM準拠ブラウザ(Firefox、Chromeなど) onmousedownonmouseuponclickonmousedownonmouseuponclickondblclick ところがIEではどうもマウスイベントが不規則というか、いくつかのイベントを飛ばしてしまうことが判明します。 Internet Explorer onmousedownonmouseuponclickonmouseupondblclick 一度目のonclickまでは双方同じ順番をたどるのですが、それ以降が問題になります。IEでは二回目のonmousedownonclickが見事にスルーされます。マウスイベントの実装で問題になるのは、特にonmousedownがスルーされることです。一方、二度目のonclickが発生しない件については、一応onmouseupが発生しているので、スクリプトでカバーすることが可能です。しかし、二度目のonmousedownが発生しないのには問題があります。ゲーム等のキーレスポンスが重要なケースでは、クリック(クリックはマウスアップ時に発生します)ではなくボタンを押し下げた瞬間にイベントが発生する方が望ましいときがあります。しかし、IEの仕様だと、すばやく2回マウスボタンを押すと二度目のボタン押し下げが無視されてしまうので、マウスボタンを連打する必要があるケースでは、ボタンを押し下げた回数分のイベントを期待できなくなってしまいます。 onclickondblclickイベントについては、デフォルトのイベントハンドラを使わずとも自力で実装できるのですが、onmousedownだけはどうしようもありません。どうしてもボタンを押し下げた回数とイベント数を同じにするにはonclickonmouseupで検知するしかないです(タイミングが多少ずれてしまいますが)。また、ダブルクリック発生時のクリック間隔は、いずれも一回目と二回目のマウスダウンのあいだで計算されているので、IEでは、ダブルクリックのカスタムイベントを作るにしても、クリック間隔をスクリプトで制御することは不可能になります。 また仕様なのか、双方のブラウザでondblclickイベントは左クリックボタン使用時のみ発生します。右クリックボタンのダブルクリックを検知するにはイベントを自作しなければなりません。 まとめとしては、IEではすばやく二回クリックしたとき、二回目のマウス押し下げ(onmousedown)を検知する方法はないということを念頭に置く必要があります。また、ダブルクリックのイベントを利用したい場合、デフォルトのondblclickイベントハンドラを使用するのが最善です。自力でダブルクリックイベントを作る場合、他のブラウザと違ってクリック間隔の制御ができなくなります。 ちなみに当サイトで公開しているホイールを使わずページスクロールは、IEではうまく動作しないこともあり、今回分かったことを踏まえて改良する予定です。

 - JavaScript/Ajax ,