SYNCERのロゴ
アイキャッチ画像

クリックした位置を取得する方法

マウス位置を取得するには、eventオブジェクトのpageXpageYを参照しましょう。

サンプルコード

マウスポインタ関連のイベントの、イベントオブジェクトを参照しましょう。

<div id="target"></div>
document.getElementById( "target" ).onclick = function( event ) {
	var x = event.pageX ;	// 水平の位置座標
	var y = event.pageY ;	// 垂直の位置座標
}

デモ

絶対位置

クリック位置の情報はeventオブジェクトに含まれます。クリックイベントを設定して、その中で取得しましょう。取得できるのは、ページ全体の左上からの位置座標です。このページ上をクリックしてみて下さい。

document.body.addEventListener( "click", function( event ) {
	var x = event.pageX ;
	var y = event.pageY ;
} ) ;
x = 0
y = 0

相対位置

要素内におけるクリック位置を知るには、前項の値から要素の位置を引きましょう。枠線内をクリックしてみて下さい。

// <div id="target">...</div>などの要素にクリックイベントを設定
document.getElementById( "target" ).addEventListener( "click", function( event ) {
	var clickX = event.pageX ;
	var clickY = event.pageY ;

	// 要素の位置を取得
	var clientRect = this.getBoundingClientRect() ;
	var positionX = clientRect.left + window.pageXOffset ;
	var positionY = clientRect.top + window.pageYOffset ;

	// 要素内におけるクリック位置を計算
	var x = clickX - positionX ;
	var y = clickY - positionY ;
} ) ;

x = 0
y = 0

  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年6月22日 (木)
コンテンツを公開しました。