各浏览器的鼠标位置测试

最新推荐文章于 2024-09-15 07:08:39 发布

MO_LU_7

最新推荐文章于 2024-09-15 07:08:39 发布

阅读量539

点赞数

分类专栏： HTML5 文章标签： html 鼠标 chrome 浏览器 jquery

本文链接：https://blog.csdn.net/MO_LU_7/article/details/52850118

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

参考文章：http://www.cnblogs.com/xesam/archive/2011/12/08/2280509.html
重点内容http://www.cnblogs.com/kongxianghai/p/4192032.html

测试属性：
e.pageX(jQuery)
e.layerX
e.offsetX(HTML DOM Event)
e.clientX(HTML DOM Event)
e.x(HTML DOM Event IE属性)
测试浏览器：
chrome53/IE11/FF49

图示：
这里写图片描述

测试代码如下：

<!DOCTYPE html>
<!--@author JinYingYing-->
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            #view {
                position: relative;
                left: 25px;
                top: 25px;
                width: 400px;
                height: 100px;
                border: 100px solid #adff2f;
                background: #ff8c00;
            }

            #view_2 {
                position: absolute;
                left: 75px;
                top: 375px;
                width: 300px;
                height: 100px;
                background: #008b8b;
            }
            #text{
                position: absolute;
                left: 700px;
                top: 100px;
                font-size: 20px;

            }
        </style>
    </head>

    <body>
        <div id="fake" style=" position: absolute; left: 10px; top:10px; width: 3000px; height: 2000px; background: #d3d3d3; padding: 50px;">
            <div id="view"></div>
            <div id="view_2"></div>

            <div id="text">
                <p>灰色区域left:10px,top:10px,padding:50px</p>
                <p>黄色区域width:400px height:100px top:25px,left:25px </p>
                <p>浅绿色是黄色区域的边框：宽100px</p>
                <p>深绿色width:300px height:100px left:75px top:375px</p>
            </div>
        </div>
        <script type="text/javascript">
            document.onclick = function(e) {
                e = e || window.event;
                console.log('e.pageX:', e.pageX);
                console.log('e.layerX:', e.layerX);
                console.log('e.offsetX:', e.offsetX);
                console.log('e.clientX:', e.clientX);
                console.log('e.x:', e.x);
            }
        </script>
    </body>

</html>