JavaScript: クロスブラウザでブロック要素内のクリック座標を得る方法


ちょっとやることがあって調べてみたら案外情報が見つからず、実現するのに時間がかかったのでメモしておきます。

<script type="text/javascript">
<!--
function clickhandler(event) {
        if (!event) { event = window.event; }
        var hx, hy;
        if (document.all) { // for IE
                hx = event.offsetX;
                hy = event.offsetY;
        } else {
                hx = event.layerX;
                hy = event.layerY;
        }
        alert("x:"+hx+",y:"+hy);
        // return [hx,hy];
}
//-->
</script>

<div onclick="clickhandler(event)" style="width:100px;height:100px;background-color:red"></div>

clickhandler関数がブロック要素のクリック位置を得る関数です。

prototype.js でブロック要素ないのクリック位置でなく、画面の左上からの絶対座標を得る場合は次の内容が使えます

• マウスポインタのX座標を得る - Event.pointerX
• マウスポインタのY座標を得る - Event.pointerY

その他、prototype.jsのイベント処理関数

• イベントを発生させたエレメントを取得 - Event.element
• 左クリックが押されているかどうか調べる - Event.isLeftClick
• イベントの上位伝播を防ぐ - Event.stop
• イベントを発生後のエレメントの上位を辿ってタグを検索 - Event.findElement
• イベントを監視 - Event.observe
• イベント監視を解除 - Event.stopObserving

関連サイト

• JavaScriptist

関連エントリ

• クロスブラウザでのJavaScriptキーボードイベントの扱い方
• マウスホイールイベント取得用のprototype.js拡張サンプル