jQuery逆引きリファレンス

jQuery逆引きリファレンス

イベントが発生した時のマウス情報を取得するには?(イベントオブジェクト)

2015年6月18日

クリックした位置の座標や、押されたマウスボタンの種類といったマウス情報を、イベントオブジェクトの各種プロパティを使って取得する方法を説明する。

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

 イベントが発生した時のマウスの情報を取得するために、イベントオブジェクトはさまざまなプロパティを提供しています。本稿では、それらプロパティの挙動を、具体的なサンプルで以って確認していきます。

マウスポインターの座標情報を取得する

 イベントが発生した時のマウスポインター位置を取得するには、以下のようなプロパティを利用します。

プロパティ概要
screenX/screenY スクリーン上の座標
pageX/pageY ページ(ドキュメント全体)の座標
clientX/clientY ブラウザーの表示領域での座標
offsetX/offsetY 要素内での座標
マウス座標関連のプロパティ

 言葉による説明だけでは分かりにくいと思うので、図でも示しておきます。

マウス座標関連のプロパティ

 以下は、<div id="area">要素の領域内をマウスでクリックした時に、それぞれの基準に基づいた座標を取得するサンプルです。

HTML
<!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>
マウス座標を取得するためのコード(mouse.html)
マウスクリック時の座標位置をコンソールに表示
マウスクリック時の座標位置をコンソールに表示

 ただし、Firefox環境ではoffsetXoffsetYプロパティは利用できません。代わりにe.originalEvent.LayerXe.originalEvent.LayerYを利用してください。

押されたマウスボタンを検出する

 押されたマウスボタンを検出するには、イベントオブジェクトのwhichプロパティを利用します。例えば以下は、<input>要素上でマウスをクリックした場合に、押されたボタンの種類を表示する例です。

HTML
<!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.html)
マウスボタンの種類をコンソールに表示
マウスボタンの種類をコンソールに表示

 whichプロパティの戻り値は、以下の通りです。

戻り値概要
1 左ボタン
2 中央ボタン
3 右ボタン
whichプロパティの戻り値

 ここでは、配列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」イベントメソッドについても説明する。

20. 一度だけ実行されるイベントリスナーを設置するには?(one)

登録されたイベントリスナーを最初の一度だけ実行するoneメソッドの基本的な使い方を解説する。

21. 【現在、表示中】≫ イベントが発生した時のマウス情報を取得するには?(イベントオブジェクト)

クリックした位置の座標や、押されたマウスボタンの種類といったマウス情報を、イベントオブジェクトの各種プロパティを使って取得する方法を説明する。

22. イベント処理を中断するには?(preventDefault/stopPropagation/stopImmediatePropagation)

イベントリスナーによる処理を、イベントオブジェクトの3つのメソッドを使って中断する方法を説明する。また、それぞれの使い分け方法も解説する。

23. 非同期通信で取得したコンテンツをページに反映させるには?(load)

loadメソッドを使って、外部のWebページを非同期に取得して、それをコンテンツ内の要素に反映させる方法を説明する。

サイトからのお知らせ

Twitterでつぶやこう!


Build Insider賛同企業・団体

Build Insiderは、以下の企業・団体の支援を受けて活動しています(募集概要)。

ゴールドレベル

  • グレープシティ株式会社
  • 日本マイクロソフト株式会社