pageX 第4页

js鼠标事件中的clientX/clientY,screenX/screenY,pageX/pageY,offsetX/offsetY,layerX/layerY,x/y

clientX/clientY,screenX/screenY这两组是标准，一般用这两组，就没问题了clientX/clientY相对于目标可视区的坐标，不包括边框，不会随滚动条变化screenX/screenY位置相对于用户屏幕============================================================下面是其他属性的兼容情况注意ie最高只测试到ie9

linsk1998·2020-08-21 14:39

js事件对象Event获取pageX,clientX,screenX,offsetX,layerX的方式与区别

pageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,同一个元素坐标不随滑动条移动而变化clientX:鼠标在页面上可视区域的位置,即是以浏览器滑动条此刻的滑动到的位置为参考点,同一个元素坐标随滑动条移动而变化

逍遥不羁·2020-08-21 14:15

JavaScript中鼠标event的位置(clientX,layerX,x,offsetX等)

浏览器窗口所有layerX，layerY最近的绝对定位的父节点，如果没有，则为documentFirefox，Chrome，SafarioffsetX，offsetY事件目标对象所有，Firefox除外pageX

iteye_12675·2020-08-21 14:20

JavaScript 获取鼠标pageX/pageY的兼容写法

点击页面的任何部分document.onclick=function(event){//兼容写法event=event||window.event;//event的兼容写法varpagex=event.pageX

houyanhua1·2020-08-21 14:15

Javascript中event对象的clientX，LayerX，offsetX, pageX

e.pageXe.layerXe.offsetXe.clientXe.screenXe.x属性；测试浏览器：FF9/Chrome15/opera11.52/safari5(win)/IE6/7/8/9测试代码：ViewCode图示：测试结果如下：chrome：e.pageX

Evan_Gu·2020-08-21 14:04

JS一秒区分clientX,offsetX,screenX,pageX之间关系

javascript的event对象的clientX,offsetX,screenX,pageX弄得头晕，于是决定做个图来区分一下event.clientX、event.clientY鼠标相对于浏览器窗口可视区域的

dingzhui2715·2020-08-21 14:11

event对象的clientX,offsetX,screenX,pageX

chrome：e.pageX——相对整个页面的坐标e.layerX——相对当前坐标系的border左上角开始的坐标e.offsetX——相对当前坐标系的border左上角开始的坐标e.clientX——

dianzhani178819·2020-08-21 14:34

轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别

总是会被javascript的event对象的clientX,offsetX,screenX,pageX弄得头晕先总结下区别：event.clientX、event.clientY鼠标相对浏览器窗口可视区域的

bamo3265·2020-08-21 13:55

HTML 页面中的位置：clientX、screenX、offsetX、pageX

事件中鼠标的(x,y)位置clientX鼠标相对于浏览器左上角x轴的坐标；不随滚动条滚动而改变；clientY鼠标相对于浏览器左上角y轴的坐标；不随滚动条滚动而改变；pageX鼠标相对于浏览器左上角x轴的坐标

墨城之左·2020-08-21 13:03

offsetX，clientX，pageX

鼠标的位置offsetXoffsetY相当于事件源元素的位置坐标。IE只支持offsetX和offsetY。clientXclientY相对于浏览器视口的坐标。个人感觉这个比较常用。pageXpageY相对于document左上角的坐标。

DongFuPanda·2020-08-21 12:57

[js点滴]常见的事件位置属性

##1.常见的事件位置属性e.pageX——相对整个页面的坐标注意:IE6、IE7、IE8无该属性e.layerX——相对当前坐标系的border左上角开始的坐标注意：在opera、IE6、IE7、IE8

刘玉刚·2020-08-21 12:14

javascript 中 x offsetX clientX screenX pageX的区别

在javascript的事件对象中的关于事件鼠标位置的几个属性（x,pageX,offsetX,scrrenXclientX)及（y,pageY,offsetY,screenY,clientY),其中offsetX

yang_chuanlong·2020-08-21 12:59

Jquery实现鼠标拖拽页面模块移动（常用于后台模块布局自定义设计）

演示效果：说明：结合使用mousedown、mousemove、mouseup三个事件，调用事件自带的event参数下的offsetX、offsetY、pageX、pageY，实现按住拖动模块效果实现代码

Show_Yeah·2020-08-21 04:16

clientX, pageX, offsetX, screenX

2.pageX属性返回当事件被触发时鼠标指针的位置相对于整个文档的x（水平）坐标以像素为单位的只读属性。这个属性考虑任何页面的水平方向上的滚动。cl

钟小楼·2020-08-19 06:35

js 事件

argument[0]IE浏览器下：用window.event2、事件对象中的内容e.clientX：鼠标点击位置距离浏览器左上角的横轴坐标e.clientY：鼠标点击位置距离浏览器左上角的纵轴坐标e.pageX

Qin_ace·2020-08-19 03:10

css border-box与content-box的不同点

的理解造成的差异后记提一下容易混肴的几个量度:css的left、margin-left、width；js元素对象属性的offsetWidth、clientWidth；js中event对象的offsetX,clientX,pageX

codeflame·2020-08-19 01:26

Bootstrap 为Carousel在移动端中添加滑动功能[转]

'touchstart',function(e){varthat=$(this);vartouch=e.originalEvent.changedTouches[0];varstartX=touch.pageX

atr1170·2020-08-19 01:28

原生JS，webAPI，案例：计算鼠标在盒子内的坐标

//首先得到鼠标在页面中的坐标（e.pageX,e.pageY）//其次得到盒子在页面中的距离(box.offsetLeft,box.offsetTop)//用鼠标距离页面的坐标减去盒子在页面中的距离，

往事如风丶·2020-08-18 23:16

关于function(e)中的e

以一段代码为例：$(function(){varx=10;vary=20;//这个e是mouseover事件，在这里用到了e.pageX和e.pageY$('a.tooltip').mouseover(

virusos·2020-08-18 17:08

6磁力图片

1213position:absolute;14}15161718$(function(){19$(document).click(function(e){20$("img").animate({left:e.pageX

weixin_30410999·2020-08-18 04:12

点击事件在当前点击位置弹出一个弹窗

GetPostionfunctionGetPostion(e){varx=getX(e);vary=getY(e);return[x,y]}functiongetX(e){e=e||window.event;returne.pageX

dianfu4327·2020-08-17 22:29

js判断移动端手势上下左右滑动事件

$("body").on("touchstart",function(e){e.preventDefault();startX=e.originalEvent.changedTouches[0].pageX

dianfu4327·2020-08-17 22:29

js实现简易拖拽

简易拖拽目录代码实例代码解析scrollWidth,clientWidth,offsetWidth的区别offsetX,clientX,pageX的辨析下载源码链接代码实例(function(){vardragging

则若·2020-08-16 22:22

js进阶 12-17 jquery实现鼠标左键按下拖拽功能

js进阶12-17jquery实现鼠标左键按下拖拽功能一、总结一句话总结：监听的对象必须是文档，鼠标按下运行mousemove事件，鼠标松开取消mousemove事件的绑定，div的偏移的话是pageX

weixin_33862993·2020-08-16 21:17

JQ鼠标拖动效果

改变鼠标指针的形状$(this).css("cursor","move");//DIV在页面的位置varoffset=$(this).offset();//获得鼠标指针离DIV元素左边界的距离varx=e.pageX-offset.left

SunxHome·2020-08-16 20:54

js，e.pageX、pageY模态框拖动

手写模态框拖动功能Document.tk-modal{position:absolute;width:300px;}.tk-modal-header{border:1pxsolid#ccc;width:200px;}.tk-modal-close{width:50px;}关闭$(function(){//模态窗//模态窗关闭tkModalOpen($(".tk-ask-modal"));$(doc

唐策·2020-08-16 20:43

js--简单放大镜实现（带移动方块）

/**知识点预备clientX,clientY鼠标相对于可视区的位置offsetX,offsetYlayerXlayerY鼠标相对于事件源的位置screenX，screenY鼠标相对于屏幕的位置pageX

xie1987524·2020-08-16 17:30

dorado Menu 右键菜单

指定其弹出位置2.在控件的onContextMenu事件绑定menuvarmenuOper=view.get("#menuId");menuOper.show({position:{left:arg.event.pageX

puspos·2020-08-16 13:09

鼠标移动到div上时，获取事件对象event、容器id、鼠标的位置

mouseover(function(event){console.log(event);//获取事件对象console.log(event.target.id);//获取容器idconsole.log(event.pageX

lianflower·2020-08-16 06:08

点击页面计数效果

absolute','color':'red','display':'none'});$('body').append($i);$(document).on('click',function(e){varx=e.pageX

weixin_34015336·2020-08-15 00:55

Jquery获取鼠标位置和判断鼠标是否在DIV中

//获取鼠标位置$(document).mousemove(function(e){x=e.pageX;y=e.pageY;});//x的值相对于文档的左边缘。

Marko柏森·2020-08-14 23:39

鼠标的位置

e）vare=window.event;if（e.pageX||e.pageY）{posx=e.pageX;posy=e.pageY;}elseif（e.clientX||e.cl

Linsanity_林好酷·2020-08-14 21:56

拖拽写法

$(function(){vardisX=0;vardisY=0;$('div').mousedown(function(ev){disX=ev.pageX-$(this).offset().left;

零零零jiawei·2020-08-14 10:35

精确定位以及js实现拖动

（可视区域不包括工具栏和滚动条）注：如果鼠标不动，滚动滚轮，再次点击，值不变2.pageXpageYevent.pageX;event

唐宋元明清其·2020-08-14 09:56

[微信小程序]手指触摸动画效果(完整代码附效果图)

示例二:示例一代码(微信小程序)://pages/test/test.jsPage({containerTap:function(res){varthat=thisvarx=res.touches[0].pageX

a_靖·2020-08-14 03:05

关于better-scroll垂直方向轮播图功能添加

关于better-scroll垂直方向轮播图功能添加打开源码snap.js添加几行代码就搞定开启loop、初始化为第一张图this.goToPage(this.currentPage.pageX||this.hasHorizontalScroll

weixin_33701564·2020-08-13 21:48

js鼠标跟随鼠标事件

绑定鼠标事件$(".p5-3")[0].addEventListener('touchstart',function(evt){vartouch=evt.touches[0];thisX=touch.pageX

SunnyKoji·2020-08-13 16:51

鼠标事件-鼠标位置和鼠标滚轮

（2）页面坐标位置页面坐标通过事件对象的pageX和pageY属性获得。这两个属性表示鼠标光标在页面中的位置，因此坐标是从页面本身而非视口的左边和顶部计算的。

yuxiaoxia28·2020-08-11 01:36

微信小程序实现左右滑动(带动画)

判断执行滑动事件Page({data:{page:1,ani1:'',ani2:''},onLoad:function(){},touchStart:function(e){startX=e.touches[0].pageX

岁末Zzz·2020-08-11 00:47

彻底弄清楚scrollWidth、clientWidth、screenX和pageX之间的关系

body{margin:0;padding:0;width:3000px;height:5000px;}#box{width:200px;height:1500px;background-color:red;}varbox=document.getElementById("box");//页面可视区的宽度varoClientWidth=window.innerWidth||document.doc

wanxue0804·2020-08-10 22:53

几种浏览器常见的术语

window.innerWidth单位：css像素浏览器滚动距离：window.pageXOffset单位：css像素文档的尺寸：document.documentElement.offsetWidth事件坐标：pageX

xiongzhengxiang·2020-08-10 04:33

原生JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸名

1）关于pageX,clienX,offsetX,layerXpageX：鼠标在页面上的位置，从页面左上角开始，即是以页面为参考点，不随滑动条移动而变化clientX：鼠标在页面上可视区域的位置，从浏览器可视区域左上角开始

weixin_30711917·2020-08-09 13:28

前端鼠标位置的获取

pageX，pageY，screenX，screenY，clientX，和clientY返回一个数，其指示物理“CSS像素”的数量的点是从参考点。事件点是用户单击的位置，参考点是左上角的一个点。

斯诺伐克·2020-08-09 11:34

vue函数同步执行遇到的问题

varwidthNum;varheightNum;document.onmousemove=function(e){oDrag.style.width=e.pageX-disx-195+'px';oDrag.style.height

Not_A_Coder·2020-08-08 20:35

pageX、pageY及父元素的页面坐标使提示框跟随鼠标移动

提示框相对父元素的定位，要计算提示框的left和top属性。所以公式应该为提示框的相对坐标=鼠标的页面坐标-父元素的页面坐标计算鼠标的页面坐标：event.pageXevent.pageY计算父元素的页面坐标：首先写一个js获取元素到页面顶部和左部距离的方法functiongetElementPosition(elem){varelemTop=elem.offsetTop;//获得elem元素距相

weiqing687·2020-08-08 19:19

实现手机滑动翻页效果

functiontouchToNextPage(){document.addEventListener('touchstart',function(e){//获得手指开始碰触屏幕时的x坐标nStartX=e.touches[0].pageX

la_啦·2020-08-07 18:48

移动端双指缩放事件(原生)，e.originalEvent.touches

false;varstart=[];$(".full-bgimg").on("touchstart",function(e){//alert("touchstart")//手指按下时的手指所在的X，Y坐标pageX

唐策·2020-08-07 16:27

读书项目：阅读器翻页功能实现

TouchEvent事件在changeTouches当中有几根手指就有几条数据pageXclientXscreenX的区别pageX/pageY：鼠标相对于整个页面的X/Y坐标整个页面的意思就是你整个网页的全部

oiaa·2020-08-07 11:27

简单mpvue中实现左右滑动事件

:false};},methods:{//触摸开始事件touchStart:function(e){varthat=this;that.touchDot=e.mp.changedTouches[0].pageX

做块泥·2020-08-05 11:38

关于offsetX、layerX、clientX、screenX以及pageX

【转载请注明出处】：https://blog.csdn.net/huahao1989/article/details/107775411我们都熟知，标题中的几个方法都是用来获取事件(event)的位置，但是他们有什么区别呢？就用一张图来说明offsetX：指事件发生位置相对触发元素左上角的水平坐标layerX：FF特有,鼠标相比较于当前坐标系的位置,即从当前容器依次往上寻找设置绝对定位或相对定位的

后端老鸟·2020-08-05 02:32

推荐频道

pageX