[JavaScript] mousemoveイベントで押下状態取得

このエントリーをはてなブックマークに追加

お絵かきなどでマウスボタンを監視する時、よくあるのがmousedownとmouseupを使う方法。ただ、ステートを持ち続けるのがいまいち美しくないので、押下時に取る方法を調べてみた。

※一部のブラウザは非対応なので、使い物になりません。

これが、よくある方法。

できればこうやりたい。

そんなこともあろうかと、マウスイベントはイベントオブジェクトから直接状態を取れる。

  • event.button
  • event.buttons
  • event.which

しかし、残念ながらそれらの仕様はブラウザによって全く違うのだ。

ブラウザ別押下状態プロパティ

検証は、例えばhttp://www.javascripter.net/faq/mouseev2.htmでできる。
なお、以下は全部mousemoveイベントから取っている。

Chrome(35.x) → whichを使う

備考
button0012左クリックが分からない。
buttons存在しない。
which0123まとも。

Firefox(30.x) → buttonsを使う

備考
button0000無反応。
buttons0142素晴らしい。同時押しもOK。
which1111無反応。

IE(9.x) → buttonを使う

備考
button01?2中クリックがブラウザに吸われる。
左右同時押しOK。
buttons存在しない。
which存在しない。
buttonID0000なんだよこの思わせぶりなプロパティは!

IE(10.x) → buttonsを使う

備考
button0000互換性が…
buttons0142同時押しOK。
which1111無反応。
buttonID消滅。

Safari(Win 5.x) → 使えない

備考
button0012肝心の左クリックが取れない。
buttons存在しない。
which1123肝心の左クリックが取れない。

利用すべきプロパティはブラウザごとで全部違う。ひどい。

サンプル

なんでこんな違うの?

現在のbuttonプロパティは、mousedown/mouseupイベントでしか値が決定されないという仕様だから。以下DOM Level 3 Eventsから引用。

The value of button is assumed to be valid during mousedown/ mouseup event handlers, whereas the buttons attribute reflects the state of the mouse’s buttons for any trusted MouseEvent object
http://www.w3.org/TR/DOM-Level-3-Events/#widl-MouseEvent-buttons

DOM Level 3 Eventsが実装されてbuttonsプロパティが使えるようになるまでは、素直にmousedown/mouseupを使う方がよさそう。

このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。* が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">