クリックした位置を取得する方法
マウス位置を取得するには、eventオブジェクトのpageX
、pageY
を参照しましょう。
サンプルコード
マウスポインタ関連のイベントの、イベントオブジェクトを参照しましょう。
<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
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
関連記事
- 要素の位置座標を取得する方法
- 指定した要素の位置座標を取得します。
- タッチした位置を取得する方法
- スマホなどでタッチした位置座標を取得します。
- スクロールをする方法
- 絶対的、相対的に位置を指定して、スクロールします。
- 指定文字を置換、削除する方法
- 文字列の中の指定した部分を置換したり削除します。
- スクロール量を取得する方法
- スクロール量を取得するには、window.pageYOffsetを参照しましょう。
- 要素に適用されているCSSの値を取得する方法
- 要素に適用されているスタイルシートの値を取得します。