JavaScriptイベントのマウスイベント

1.マウスイベント

DOM 3レベルイベントでは、9つのマウスイベントが定義されています.

click:ユーザーがメインマウスボタン(一般的に左側のボタン)をクリックしたり、リターンキーを押すと

がトリガーされます.

dbclick:ユーザーがメインマウスボタンをダブルクリックすると

がトリガーされます.

mousedown:ユーザーが任意のマウスボタンを押したときに

をトリガーする.

mouseenter:ボディーガードカーソルがエレメントの外部からエレメント範囲内に最初に移動したときにトリガーされます.このイベントは泡が立たず、マウスが子孫エレメントに移動しても

はトリガーされません.

mouseleave:要素の上にあるマウスカーソルが要素の範囲外に移動したときにトリガーされます.このイベントは泡が立たず、マウスを子孫要素に移動しても

はトリガーされません.

mousemove:マウスポインタが要素の内部を移動すると

が繰り返しトリガーされます.

mouseout:マウスポインタが1つの要素の上にあり、ユーザーが別の要素に移動すると

がトリガーされます.

mouseover:マウスポインタが1つの要素の外部にあり、ユーザーが最初に別の要素の境界内に移動すると

がトリガーされます.

mouseup:ユーザーがマウスボタンを離すと

がトリガーされます.
clickイベントがトリガーされると、順次トリガーされます.

mousedown

mouseup

click

マウスイベントオブジェクトには、ビューポート、ページ、画面に対するマウスの座標位置情報が保存され、マウスイベントを正確に制御できます.

clientX、clientY:マウスイベント発生時のビューポート(表示可能領域)におけるマウスポインタの水平座標および垂直座標

.

pageX、pageY:マウスイベント発生時のページ全体に対するマウスポインタの位置座標

screenX、screenY:マウスイベント発生時のマウスポインタの画面全体に対する座標情報

.
IE 8以降のバージョンではイベントオブジェクト上のページ座標はサポートされていませんが、ビューポート座標とスクロール情報で計算できます.

var pageX = event.pageX, pageY = event.pageY;
if(pageX === undefined) {
    pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
}
if(pageY === undefined) {
    pageXY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
}

mousedownイベントとmouseupイベントのeventオブジェクトにはbuttonプロパティがあり、押したり放したりするボタンを表します.DOMのbutton属性には3つの値があります.

0:メインマウスボタン(マウス左ボタン)を示す

1:中央を表すマウスボタン(マウスホイール)

2:マウスボタン(右マウスボタン)

一方、IE 8および以前のバージョンではbutton属性とDOMのbutton属性には大きな違いがあります.

0:ボタンが押されていない

1:メインマウスボタン

を押す

2:次のマウスボタン

を押す

3:メイン、セカンダリマウスボタン

を同時に押す

4:中間ボタン

を押す

5:メインマウスボタンと中間ボタン

を同時に押す.

6:次のマウスボタンと中間ボタン

を同時に押す

7:3つのボタン

を同時に押す
IEとDOMは、ブラウザのhasFeature()メソッドで互換性があります.

var EventUtil = {
    getButton: function(event) {
        if(document.implementation.hasFeature("MouseEvents", "2.0") {
            return event.button;
        } else {
            switch(event.button) {
                case 0:
                case 1:
                case 3:
                case 5:
                case 7:
                    return 0;
                case 2:
                case 6:
                    return 2;
                case 4:
                    return 1;
            }
        }
    }
}

2.マウスホイールイベントmousewheel

mousewheelイベントに対応するeventオブジェクトには、マウスイベントのすべての標準情報に加えて、特殊なwheelDeltaプロパティも含まれています.ユーザーがマウスホイールを前にスクロールすると、wheelDeltaは120の倍数である.マウスホイールを後ろにスクロールすると、wheelDeltaは-120の倍数になります.Opera 9について5以前のバージョンでは、wheelDelta値の正負は逆です.FirefoxはDOMMouseScrollというイベントをサポートし、マウスホイールのスクロールがトリガーであり、windowオブジェクトにバブルが発生します.マウススクロールに関する情報はdetailプロパティに保存されます.マウスホイールが前にスクロールすると、このプロパティ値は-3の倍数で、後ろにスクロールすると3の倍数になります.ブラウザ環境にまたがるソリューション:

if(event.wheelDelta) {
    return event.wheelDelta;
} else {
    return -event.detail*40;  //Firefox
}