代码之家 › 专栏 › 技术社区 › Babiker

鼠标捕捉功能?

firefox javascript

1

Babiker · 技术社区 · 15 年前

<html>
    <script type="text/javascript">
        document.onmousemove = getCursorXY;

        function getCursorXY(e) {
            document.getElementById('cursorX').value = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
            document.getElementById('cursorY').value = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
        }
    </script>

    <body>
        <input id="cursorX" size="3">
        <input id="cursorY" size="3">
        <input type="button" id="button">
    </body>
</html>

这样,当页面加载和移动鼠标时,我的鼠标坐标就会显示在输入字段中。我该怎么做当我在#按钮上,然后在我 鼠标只在#按钮上移动

提前感谢:)

1 回复 | 直到 15 年前

1

John Hartsock 15 年前

试试这样的。

<html> 
    <script type="text/javascript"> 
        function getCursorXY(e) { 
            document.getElementById('cursorX').value = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); 
            document.getElementById('cursorY').value = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); 
        } 

        window.onload = function () {
            document.getElementById("button").onmousedown = getCursorXY;
        }
    </script> 

    <body> 
        <input id="cursorX" size="3"> 
        <input id="cursorY" size="3"> 
        <input type="button" id="button"> 
    </body> 
</html>