マウスの座標を表示する

2017年2月27日2020年12月15日

Javascriptでマウスの座標(左上端からのX,Y距離)を表示する。

ソースコード

mouse.html

<HTML>
<HEAD>
    <TITLE> マウス座標 </TITLE>
</HEAD>
<BODY>
    マウス座標
    <br>
    (X,Y) = 
    <input type="text" style="width:50;" id="global_x">,
    <input type="text" style="width:50;" id="global_y"> <br>

    <SCRIPT type="text/javaSCRIPT">
        (function (){
            // スクロール位置取得
            function GetScrollPosition(obj){
                return{
                    x:obj.body.scrollLeft || obj.documentElement.scrollLeft,
                    y:obj.body.scrollTop  || obj.documentElement.scrollTop
                };
            }

            // マウス追従
            function TailingMouseMotion(e){

                var scrlpos = GetScrollPosition(document);
                var position;

                // X座標計算
                position = document.getElementById("global_x");
                position.value = e.clientX + scrlpos.x;
                
                // Y座標計算
                position = document.getElementById("global_y");
                position.value = e.clientY + scrlpos.y;
            }

            // イベント処理
            if(document.addEventListener){
                document.addEventListener("mousemove" , TailingMouseMotion);
            }else if(document.attachEvent){
                document.attachEvent("onmousemove" , TailingMouseMotion);
            }

        })();
        
    </SCRIPT>
</BODY>
</HTML>