问答详情
源自：2-3 jQuery鼠标事件之mousemove事件

鼠标放在最左边的时候，e.pageX为什么是13？

    .left div,

    .right div {

        width: 300px;

        height: 80px;

        padding: 5px;

        margin: 5px;

        border: 1px solid #ccc;

    }

    

    .left div {

        background: #bbffaa;

    }

 

  <h4>测试二</h4>

    <div class="left">

        <div class="aaron1">

            <p>鼠标在绿色区域移动触发mousemove</p>

            <p>移动的X位置：</p>

        </div>

    </div>

    <script type="text/javascript">

    //绑定一个mousemove事件

    //触发后修改内容

    $(".aaron1").mousemove(function(e) {

        $(this).find('p:last').html('移动的X位置：' + e.pageX)

        // e.pageX是鼠标相对于文档边缘（文档边缘也就是document的边缘）的X轴位置

    })

    </script>


提问者：慕粉2236556370 2017-03-17 14:29

个回答

  • 我爱小小小橘子
    2017-09-06 10:05:45

    你把这段初始样式指令放进去，再将例子里

    .left div,

    .right div 

    的css的padding margin 和border全部设置为0，那么e.pageX 初始值就为0

    .left div,

        .right div {

            width: 300px;

            height: 80px;

            padding: 0px;

            margin: 0px;

            border: 0px solid #ccc;

        }

        








    body{ margin: 0;padding: 0;font-family: "微软雅黑";overflow: hidden;}
    body,html{-webkit-text-size-adjust: none;width: 100%;height: 100%;}
    *{text-decoration: none;list-style: none;}
    img{border: 0px;}
    ul,li,dl,dd,dt,p,ol,h1,h2,h3,h4,h5{font-size: 12px;font-weight: 100;padding: 0;margin: 0;}
    .wrap{margin: 0 auto;}
    .fl{float: left;}
    .fr{float: right;}
    .index{overflow: hidden;}
    .clr{clear:both; height:0px; width:100%; font-size:1px; line-height:0px; visibility:hidden; overflow:hidden;}
    .pointer{cursor:pointer;}
    a,input,button{ outline:none; }
    ::-moz-focus-inner{border:0px;}
    /*a:link {color:#0f0;text-decoration:none;} 
    a:visited {color: #FFFF00; text-decoration:none;} 
    a:hover {color: #00FF00; text-decoration:underline;} 
    a:active {color: #0000FF; text-decoration:underline;}*/
    a{color: #000;}
    .wrapper{clear: both;width: 100%;}
    word-break:break-all /*文字换行*/
    /*white-space:nowrap 文字不换行*/

    /*默认滚动条样式修改ie9 google Firefox 等高版本浏览器有效*/
    /*::selection {background: #D03333;color: white;text-shadow: none;}
    ::-webkit-scrollbar-track-piece{width:10px;background-color:#f2f2f2}
    ::-webkit-scrollbar{width:10px;height:6px}
    ::-webkit-scrollbar-thumb{height:50px;background-color:rgba(0,0,0,.3);}
    ::-webkit-scrollbar-thumb:hover{background:#cc0000}*/


    /*渐变*/
    /*background-image: -moz-linear-gradient(top, #8fa1ff, #3757fa);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff4f02), color-stop(1, #8f2c00)); Saf4+, Chrome 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c6ff00', endColorstr='#538300', GradientType='0'); IE*/



    0
  • 沉鱼yy
    2017-03-20 11:08:48

    不是起始值，是鼠标在相对可视窗口当前位置的值

    0
  • 沉鱼yy
    2017-03-20 11:03:52

    e.PageX是获取当前光标的横坐标
    最左边是鼠标在绿色区域移动触发mousemove的X轴的起始值，至于是怎么计算是我也不知道。

    以上纯属个人理解


    0
  • 沉鱼yy
    2017-03-17 14:49:09

    e.pageY 、 e.pageX 是指鼠标的XY（水平、垂直方向）位置值


    0