jquery pagex与clientx

<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>

    </head>
    <body style="width:2200px;height:10000px";>
    </body>
    <script>
       function getpos(ev){
           var scrilltop=document.documentElement.scrollTop||document.body.scrollTop;
           var scrillLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
           return {x:ev.clientX+scrillLeft,y:ev.clientY+scrilltop}
       }
        document.onmousemove=function(e){
             var events=e||event;
           // console.log("clientX:"+events.clientX+"\n"+"pageX:"+events.pageX);
             if(getpos(events).x==events.pageX){
                   console.log("1111");
             }
        }

    </script>
</html>

能够打印出1111

clientX相对窗口左边缘

pageX相对文档左边缘

clientX+scrollLeft=pageX;

pageX是jquery的属性 做了兼容的。推荐用pageX。

时间: 2024-10-13 07:59:48

jquery pagex与clientx的相关文章

jquery pageX属性 语法

jquery pageX属性 语法 作用:pageX() 属性是鼠标指针的位置,相对于文档的左边缘.大理石构件来图加工 语法:event.page 参数: 参数 描述 event     必需.规定要使用的事件.这个 event 参数来自事件绑定函数.  jquery pageX属性 示例 <html> <head> <script type="text/javascript" src="http://apps.bdimg.com/libs/jq

扒一扒offsetleft,srollleft,pagex,clientx,postion().left等精确位置的获取与理解

先上个pc端和手机端的图:   说明:上面的属性,都是in这个div的属性值.我是点击的in这个div的左上角,所以pageX.pageY是40. HTML: <div class="out"> <div class="in"></div> </div> css: .out{ width: 300px; height: 300px; background: skyblue; overflow: hidden; } .i

pageX、clientX、screenX、offsetX、layerX、x

e.pageXe.layerXe.offsetXe.clientXe.x 属性: 测试浏览器: FF9/Chrome15/opera11.52/safari5(win)/IE6/7/8/9 测试代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htm

e.pageX;event.clientX,event.clientY,scrollLeft,clientLeft获取鼠标位置

示例一: x方向没有滚动 var mx=0,my=0; function mouseMove(ev){Ev=ev||window.event;var mousePos=mouseCoords(Ev);mx=mousePos.x;my=mousePos.y;} function mouseCoords(ev){ if(ev.pageX||ev.pageY){ return{x:ev.pageX,y:ev.pageY}; } return{x:ev.clientX,y:ev.clientY+$(do

这样理解比较好吧(pageX,pageY,clientX,clientY,eventX,eventY,scrollX,scrollY,screenX,screenY,event.offsetX,event.offsetY,offsetLeft,style.left)

1 pageX,pageY:鼠标指针相对于当前窗口的X,Y坐标,计算区域包括窗口自身的控件和滚动条.(火狐特有) 2 event.clientX,event.clientY:鼠标指针相对于当前窗口的X,Y坐标,和page 不同的是计算区域不包括窗口自身的控件和滚动条. 3 event.X和event.Y:相对于当前窗口,设置或获取鼠标指针位置相对于父文档的x,y像素坐标(可惜火狐不支持,人生总要有些遗憾也是没办法的). 4 scrollX,scrollY:望文生义,相对于浏览器而言的,随滚动条移

jQuery中 pageX,clientX,offsetX,layerX的区别

一.PageX和clientXPageX和clientX ,这个两个比较容易搞混,PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化.可以理解为:相对#(0.0)坐标绝对定位clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化.可以理解为:相对可视化左上角坐标绝对定位 如图:(小黑点为点击坐标) 二.screenXscreenX:鼠标在屏幕上的位置,从屏幕左上角开始,这个

pageX,clientX,offsetX,layerX的区别

在各个浏览器的JS中,有很多个让你十分囧的属性,由于各大厂商对标准的解释和执行不一样,导致十分混乱,也让我们这些前端攻城狮十分无语和纠结>_< John Resig大神说过,动态元素有3个至关重要的元素,位置,尺寸和可见性.所以,今天,先拿几个页面位置属性开刀. 一.PageX和clientX PageX和clientX ,这个两个比较容易搞混,PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化clientX:鼠标在页面上可视区域的位置,从浏览器可视区域

event对象的clientX,offsetX,screenX,pageX

chrome: e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——相对当前坐标系的border左上角开始的坐标 e.clientX——相对可视区域的坐标 e.x——相对可视区域的坐标 ff: e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——无 e.clientX——相对可视区域的坐标 e.x——无 opera: e.pageX——相对整个页面的

javascript 中 x offsetX clientX screenX pageX的区别

在javascript的事件对象中的关于事件鼠标位置的几个属性(x, pageX, offsetX, scrrenX clientX)及(y, pageY, offsetY, screenY, clientY), 其中offsetX, offsetY是指相对于触发事件元素的左上角的偏移.但在不同的浏览器中其值又有所不同.在chrome opera, safari中是指外边缘,即把该元素边框的宽度计算在内,firefox ie则不包含边框值.如下图(一个具有蓝色边框的div)所示. layerX