朝圣言
扫描关注朝圣言

手机扫描二维码

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

朝圣言2016-04-26前端仕锦 16077 0A+A-
<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>


文章关键词
js
前端
jquery
发表评论