获取鼠标相对于浏览器，显示器，控件区的相对位置

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk">
    <script type="text/javascript">
        function show_coords() {
            //clientX, clientY是鼠标当前相对于网页的位置
            x = event.clientX;
            y = event.clientY;
            alert(x + "," + y);
        }
        function show_coords2() {
            //screenX, screenY是相对于用户显示器的位置
            x = event.screenX;
            y = event.screenY;
            alert(x + "," + y);
        }
        function show_coords3() {
            //offsetX, offsetY是鼠标当前相对于网页中的某一区域的位置
            x = event.offsetX;
            y = event.offsetX;
            alert(x + "," + y);
        }
    </script>
</head>
<body>
    <p>
        单击此按钮，clientX, clientY是鼠标当前相对于网页的位置
        <input type="button" onclick="show_coords()" value="click"></p>
    <p>
        单击此按钮，screenX, screenY是相对于用户显示器的位置
        <input type="button" onclick="show_coords2()" value="click"></p>
    <p>
        单击此按钮，offsetX, offsetY是鼠标当前相对于网页中的某一区域的位置（如像对于此按钮）
        <input type="button" onclick="show_coords3()" value="click像对于此按钮"></p>
    <table align="center" border="1" width="100%" bordercolor="red" onclick="show_coords3()">
        <tr>
            <td>
                clientX, clientY，offsetX, offsetY,screenX, screenY, x, y 的区别是什么？<br>
                clientX, clientY是鼠标当前相对于网页的位置，当鼠标位于页面左上角时clientX=0, clientY=0；<br>
                offsetX, offsetY是鼠标当前相对于网页中的某一区域的位置，当鼠标位于页面中这一区域的左上角时offsetX=0, offsetY=0；<br>
                screenX, screenY是相对于用户显示器的位置<br>
                x,y是鼠标相对于当前浏览器的位置
            </td>
        </tr>
    </table>
</body>
</html>
莉丝前端

发表评论
