うさぎのしっぽ

プログラミングとか。備忘録として使ってるブログです。あとは趣味少し。 間違いなどありましたらご指摘ください(・3・)

Javascriptでマウスの位置を取得&表示する

マウスカーソルのクライアント座標上での位置を取得して表示するプログラム

ちょっと端折ってるけど、このままコピペしても動くはず。 

x:0
y:0

 

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

     <title>テスト</title>

</head>

 

 <!-- 右クリック禁止-->

<body oncontextmenu="return false;">

    

    <!-- JavaScriptを記述する -->

    <script type="text/javascript">

 

// マウスを移動するたびに実行されるイベント

document.onmousemove = function (e){

// InternetExplorer 用

if(!e)e = window.event;

 

// クライアント座標系を基点としたマウスカーソルの座標を取得

var mouse_x = e.clientX;

var mouse_y = e.clientY;

 

    //他のタグなどを全て消して上書きしてしまうので×

    //document.write("x:" + mouse_x + "<br>y:" + mouse_y);

     

    //タグの中身を書き換える

    document.getElementById("mouse_pointer").innerHTML = "x:" + mouse_x + "<br>y:" + mouse_y;

};

    </script>

        

    <div id="mouse_pointer">x:0<br>y:0</div>

    

</body>

</html>

 参考:http://hakuhin.jp/js/mouse.html