JavaScriptでマウス座標を取得する最も簡単な方法
タグ: javascript / 初版公開: 2014-02-09

JavaScriptでマウス座標を取得するにはonmousemoveイベントハンドラで、イベントオブジェクトのclientXclientYを読めば良い。以下はマウス座標を表示するHTMLの例である。わずか7行のJavaScriptで実装が可能だ。

<html>
<head>
<script type="text/javascript">
(function() {
    window.onmousemove = handleMouseMove;
    function handleMouseMove(event) {
        event = event || window.event; // IE対応
        document.body.innerHTML = event.clientX + ", " + event.clientY;
    }
})();
</script>
</head>
<body>
</body>
</html>

Internet Explorerではイベントハンドラにイベントオブジェクトが渡されないため、上記のコードではeventnullならwindow.eventでイベントオブジェクトを上書きするようになっている。||演算子を使えば条件分岐は必要ない。