精华内容
参与话题
问答
  • pageX,pageY,screenX,screenY,clientX,和clientY返回一个数,其指示物理“CSS像素”的数量的点是从参考点。事件点是用户单击的位置,参考点是左上角的一个点。这些属性返回该参考点的水平和垂直距离。 1、pageX...

    pageX,pageY,screenX,screenY,clientX,和clientY返回一个数,其指示物理“CSS像素”的数量的点是从参考点。事件点是用户单击的位置,参考点是左上角的一个点。这些属性返回该参考点的水平和垂直距离。

    1、pageX和pageY:
    	相对于浏览器中完全呈现内容区域的左上角。此参考点位于左上角的URL栏和后退按钮下方。这一点可以在浏览器窗口中的任何位置,
    	并且如果在页面中嵌入了嵌入的可滚动页面并且用户移动滚动条,则实际上可以改变位置。
    
    2、screenX和screenY:
    相对于物理屏幕/监视器的左上角,只有增加或减少监视器数量或监视器分辨率时,此参考点才会移动。
    
    3、clientX和clientY:
    相对于浏览器窗口的内容区域(视口)的左上边缘。即使用户从浏览器中移动滚动条,此点也不会移动。
    
    属性 说明
    clientX 以浏览器左上顶角为原点,定位 x 轴坐标
    clientY 以浏览器左上顶角为原点,定位y轴坐标
    offsetX 以当前事件的目标对象左上角为原点,定位x轴坐标
    offsetY 以当前事件的目标对象左上角为原点,定位y轴坐标
    pageX 以Document 对象(即文本窗口)左上角为原点,定位x轴坐标
    pageY 以Document 对象(即文本窗口)左上角为原点,定位y轴坐标
    screenX 计算机屏幕左上角为原点,定位x轴坐标
    screenY 计算机屏幕左上角为原点,定位y轴坐标
    layerX 最近的绝对定位的父元素(如果没有,则为Document对象)左上角为原点,定位x轴坐标
    layerY 最近的绝对定位的父元素(如果没有,则为Document对象)左上角为原点,定位y轴坐标
    展开全文
  • pageX,clientX,screenX,offsetX区别

    万次阅读 2012-05-09 13:42:18
    pageX/pageY: 鼠标相对于整个页面的X/Y坐标。 注意,整个页面的意思就是你整个网页的全部,比如说网页很宽很长,宽2000px,高3000px,那pageX,pageY的最大值就是它们了。 特别说明:IE不支持! clientX/clientY...
    pageX/pageY:
    鼠标相对于整个页面的X/Y坐标。
    注意,整个页面的意思就是你整个网页的全部,比如说网页很宽很长,宽2000px,高3000px,那pageX,pageY的最大值就是它们了。
    特别说明:IE不支持!
    clientX/clientY:
    事件发生时鼠标在浏览器内容区域的X/Y坐标(不包含滚动条)。
    浏览器内容区域即浏览器窗口中用来显示网页的可视区域,注意这个可视,也就是说需要拖动滚动条才能看到的区域不算。
    当你将浏览器窗口缩小时,clientX/clientY的最大值也会缩小,但始终,它们的最大值不会超过你浏览器可视区域。
    特别说明:IE下此属性不规范,它们的最小值不是0而是2,也就是说IE下的clientX/clientY比火狐下始终大2px。
    screenX/screenY
    鼠标在屏幕上的坐标。screenX,screenY的最大值不会超过屏幕分辨率。
    offsetX/offsetY:
    得出的结果跟pageX/pageY一样,既然如此,它有什么存在价值?因为:
    特别说明:只有IE支持!相当于IE下的pageX,pageY。

    e.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft = e.pageX
    e.clientY + document.documentElement.scrollTop  - document.documentElement.clientTop = e.pageY
    展开全文
  • pageX、clientX等的区别

    2020-05-26 22:26:30
    鼠标事件 鼠标事件有下面这几种: 1. onclick 鼠标点击事件 box.onclick = function(e){ console.log(e) } 2. onmousedown 鼠标按下事件 box.onmousedown = function(e){ cons...
     

    鼠标事件

    鼠标事件有下面这几种:

    1. onclick

    鼠标点击事件

    box.onclick = function(e){
        console.log(e)
    }
    2. onmousedown

    鼠标按下事件

    box.onmousedown = function(e){
        console.log(e)
    }
    3. onmouseup

    鼠标松开事件

    box.onmouseup = function(e){
        console.log(e)
    }
    4. onmousemove

    鼠标移动事件

    box.onmousemove = function(e){
        console.log(e)
    }
    5. onmouseover

    鼠标经过事件

    box.onmouseover = function(e){
        console.log(e)
    }
    6. onmouseout

    鼠标划出事件

    box.onmouseout = function(e){
        console.log(e)
    }

    根据以上打印的e的信息,大致为:

    这里写图片描述

    这里写图片描述

    由鼠标事件(MouseEvent)可以发现:
           其中包含了许多的坐标,且每个坐标的含义都不一样。下面我们来挨个介绍常用的坐标,以及它们的含义。

    一、clientX、clientY

    点击位置距离当前body可视区域的x,y坐标

    二、pageX、pageY

    对于整个页面来说,包括了被卷去的body部分的长度

    三、screenX、screenY

    点击位置距离当前电脑屏幕的x,y坐标

    四、offsetX、offsetY

    相对于带有定位的父盒子的x,y坐标

    五、x、y

    和screenX、screenY一样

    如图所示:

    这里写图片描述

    展开全文
  • demo.html: //点击页面的任何部分 document.onclick = function (event) { //兼容写法 event = event || window.event; //event的兼容写


    demo.html:

    <!DOCTYPE html>  
    <html>  
    <head lang="en">  
        <meta charset="UTF-8">  
        <title></title>  
    </head>  
    <body>  
      
        <script>  
            //点击页面的任何部分  
             document.onclick = function (event) {  
                 //兼容写法  
                 event = event || window.event;  //event的兼容写法  
    			 var pagex = event.pageX || event.clientX + scroll().left;  //获取pageX的兼容写法
    			 var pagey = event.pageY || event.clientY + scroll().top;
             }  
    
    		//获取滚动时,卷起的高度和宽度的兼容写法
            function scroll(){  
                return {  
                    "top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,  
                    "left": window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft  
                }  
            } 
    
        </script>  
    </body>  
    </html> 


    展开全文
  • 通过 2 张图和 1 张表格,轻松区别 Javascript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性。 不同浏览器对这些属性的支持:
  • 鼠标事件以及clientX、offsetX、screenX、pageX、x的区别

    万次阅读 多人点赞 2018-06-12 00:26:23
    鼠标事件 鼠标事件有下面这几种: 1. onclick 鼠标点击事件 box.onclick = function(e){ console.log(e) } 2. onmousedown 鼠标按下事件 box.onmousedown = function(e){ ...box.onm...
  • clientX是指鼠标到当前页面X轴的距离,如果...pageX是指鼠标到当前bodyX轴的距离,如果有滚动,参考点也不会变,如果position为absolute为例; screenX是鼠标到当前屏幕X轴的距离,不会改变,但不同的会有所不同;...
  • jQuery的 pageX

    2016-06-01 16:57:08
    left 、top、width、和Height属性区别。 对于left和top是指该控件或是该窗体的左顶点。而width和height是右下顶点。 如下图对某一控件的展示所示: 在html中也是如此 本文转自:...
  • offsetX、clientX、pageX等位置的计算

    千次阅读 2015-06-01 13:40:45
    e.pageX——相对整个页面的坐标 注意:IE6、IE7、IE8无该属性 e.layerX——相对当前坐标系的border左上角开始的坐标 注意:在opera、IE6、IE7、IE8中这个属性,而IE8以上表示相对当前坐标系的border...
  • e.pageX

    2019-05-30 11:29:35
    手机e.pageX和e.pageY无效的原因 手机端拖拽事件: touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。 touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,...
  • pageX,clientX,offsetX,layerX的区别

    千次阅读 2017-02-17 17:17:03
    在各个浏览器的JS中,有很多个让你十分囧的属性,由于各大厂商对标准的解释和执行不一样,导致十分混乱,也让我们这些前端攻城狮十分无语和纠结>_ John Resig大神说过,动态元素有3个至关重要...PageX:鼠标在页面上的位置,
  • ## 问题我直接上图了 ... console.log('e.pageX的坐标是' + e.pageX); console.log('login.offsetLeft的坐标是' + login.offsetLeft); console.log('鼠标在盒子内部的坐标是:' + x); }) ```
  • 提示框相对父元素的定位,要计算提示框的left和top属性。所以公式应该为提示框的相对坐标=鼠标的页面坐标-父元素的页面...event.pageX event.pageY 计算父元素的页面坐标: 首先写一个js获取元素到页面顶部距离的方法
  • 关于PageX,client

    2019-03-19 14:44:13
    在懒加载中 document.... document.documentElement.clientHeight 为当前窗口的高度。 所以 只需要判断 当前 元素离顶部的距离 < 滚动的距离 + 窗口的高度 即: element.offsetTop < document.documen...
  • jQuery事件pageX

    2019-04-13 15:00:17
    pageX() 属性是鼠标指针的位置,相对于文档的左边缘。 event.pageX event 必需。规定要使用的事件。这个 event 参数来自事件绑定函数。
  • pageX和clientX

    千次阅读 2017-09-29 22:09:15
    摘自http://www.cnblogs.com/jicheng/p/5945057.html。 很好的说明pageX和clientX的问题。。。
  • 在各个浏览器的JS中,有很多个让你十分囧的属性,由于各大厂商对标准的解释和执行不一样,导致十分混乱,也让我们这些前端攻城狮十分无语和纠结>_ John Resig大神说过,动态元素有...PageX:鼠标在页面上的位置,从页面左上角
  • pageX,clientX区别

    2017-04-09 09:58:00
    pageX/pageY:鼠标相对于整个页面的X/Y坐标。注意,整个页面的意思就是你整个网页的全部,比如说网页很宽很长,宽2000px,高3000px,那pageX,pageY的最大值就是它们了。特别说明:IE不支持! //------------------...
  • pagex,screenx,clientx的区别

    千次阅读 2015-07-09 11:34:36
    screenX:参照物为电脑的屏幕左上角,距离电脑屏幕的水平距离 clientX:参照物是内容区域左上角,距离内容区域...pageX:参照物也是内容区域的左上角,距离内容区域左上角的水平距离,但是不会随着滚动条的移动而移动
  • 我在用微信小程序写一个滑动获取区间的功能,是根据PageX获取位移的,但是移动的 不是很准确!从0开始滑动,上面数值改变,再往回滑,有时候会变零,有时不会,请教大神啊[图片说明]...

空空如也

1 2 3 4 5 ... 20
收藏数 30,704
精华内容 12,281
关键字:

pagex