jQuery逆引きリファレンス
イベントが発生した時のマウス情報を取得するには？（イベントオブジェクト）
クリックした位置の座標や、押されたマウスボタンの種類といったマウス情報を、イベントオブジェクトの各種プロパティを使って取得する方法を説明する。
イベントが発生した時のマウスの情報を取得するために、イベントオブジェクトはさまざまなプロパティを提供しています。本稿では、それらプロパティの挙動を、具体的なサンプルで以って確認していきます。
マウスポインターの座標情報を取得する
イベントが発生した時のマウスポインター位置を取得するには、以下のようなプロパティを利用します。
| プロパティ | 概要 |
|---|---|
| screenX／screenY | スクリーン上の座標 |
| pageX／pageY | ページ（ドキュメント全体）の座標 |
| clientX／clientY | ブラウザーの表示領域での座標 |
| offsetX／offsetY | 要素内での座標 |
言葉による説明だけでは分かりにくいと思うので、図でも示しておきます。
以下は、<div id="area">要素の領域内をマウスでクリックした時に、それぞれの基準に基づいた座標を取得するサンプルです。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<div id="box" style="position:absolute; margin:30px; top:20px; left:20px; width:300px; height:200px; border:solid 1px #000"></div>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$('#box').on('click', function(e) {
console.log('screen=' + e.screenX + ',' + e.screenY);
console.log('page=' + e.pageX + ',' + e.pageY);
console.log('client=' + e.clientX + ',' + e.clientY);
console.log('offset=' + e.offsetX + ',' + e.offsetY);
});
</script>
</body>
</html>
|
ただし、Firefox環境ではoffsetX／offsetYプロパティは利用できません。代わりにe.originalEvent.LayerX／e.originalEvent.LayerYを利用してください。
押されたマウスボタンを検出する
押されたマウスボタンを検出するには、イベントオブジェクトのwhichプロパティを利用します。例えば以下は、<input>要素上でマウスをクリックした場合に、押されたボタンの種類を表示する例です。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<input type="text" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function() {
$('input').mousedown(function(e) {
// ボタンの種類を配列に準備
var types = [ '', '左', '中央', '右' ];
console.log(types[e.which] + 'ボタンがクリックされました。');
});
});
</script>
</body>
</html>
|
whichプロパティの戻り値は、以下の通りです。
| 戻り値 | 概要 |
|---|---|
| 1 | 左ボタン |
| 2 | 中央ボタン |
| 3 | 右ボタン |
ここでは、配列typesにあらかじめ戻り値に対応するボタンの種別（左／中央／右）を用意しておき、whichプロパティの値に応じて、テキストをコンソール表示しています。
API：event.which｜event.pageX｜event.pageY カテゴリ：Events（イベント） > Event Object
※以下では、本稿の前後を合わせて5回分（第19回～第23回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
19. マウスポインターが要素に出入りした時の処理を実装するには？（mouseover、mouseout、mouseenter、mouseleave、hover）
違いが分かりにくい「mouseover／mouseout」と「mouseenter／mouseleave」イベントの使い分け方法を解説。また、これらに関連する「hover」イベントメソッドについても説明する。
21. 【現在、表示中】≫ イベントが発生した時のマウス情報を取得するには？（イベントオブジェクト）
クリックした位置の座標や、押されたマウスボタンの種類といったマウス情報を、イベントオブジェクトの各種プロパティを使って取得する方法を説明する。
22. イベント処理を中断するには？（preventDefault／stopPropagation／stopImmediatePropagation）
イベントリスナーによる処理を、イベントオブジェクトの3つのメソッドを使って中断する方法を説明する。また、それぞれの使い分け方法も解説する。
