JavaScript マウスイベントのケーススタディ

マウスイベント

マウスが特定の操作を実行すると、イベント オブジェクトが生成され、イベントがトリガーされたときのマウスのすべてのプロパティが記録されます。

次のようにして、Google コンソールで MouseEvent オブジェクトを出力できます。

関数mouseDown(e){
var e = e||イベント;
コンソール.log(e)
}
window.onload = 関数 (){ 
document.getElementsByTagName('body')[0].addEventListener('mousedown',mouseDown,false)
}

印刷された MouseEvent は次のようになります。

このオブジェクトには多くのプロパティがありますが、最もよく使用されるのは offsetX、offsetY、clientX/clientY、pageX、pageY です。さまざまな属性は何に対応していますか?

以下に一般的なイベントをいくつか示します。

altkey: マウス イベントがトリガーされたときに alt キーが押されているかどうか。押されている場合は true を返し、それ以外の場合は false を返します。

button: イベント属性はアラビア数字を返します。0 は左ボタンの押下を表し、1 はスクロール ホイールの押下を表し、2 は右ボタンの押下を表します。

offsetX、offsetY: イベント属性は、イベントがトリガーされたときに、イベント ソース要素に対するマウスの X 座標と Y 座標を返します。標準イベントには対応する属性はありません。

clientX、clientY: イベント プロパティは、イベントがトリガーされたときに、ブラウザー ページ (またはクライアント領域) に対するマウス ポインターの水平座標と垂直座標を返します。

pageX、pageY: イベント属性は、イベントがトリガーされたときに、ページ全体の左上隅を基準としたマウス ポインターの水平座標と垂直座標を返します。

screenX、screenY: イベント属性は、イベントがトリガーされたときのユーザーの画面に対するマウスの位置の水平座標と垂直座標を返します。参照点、つまり原点は、画面の左上隅です。

まあ、テキストによる説明はいつも面倒なので、ここですべてを説明する古典的な画像を示します。

JavaScript マウス イベント (MouseEvent) のケース スタディに関するこの記事はこれで終わりです。JavaScript マウス イベント (MouseEvent) に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。