分清clientY pageY screenY layerY o

作者: 叶叶叶xxx | 来源:发表于2019-05-25 22:52 被阅读0次

在我们想要做出拖拽这个效果的时候，我们需要分清这几个属性的区别，这几个属性都是计算鼠标点击的偏移值，我们需要对其进行了解才可以继续实现我们的拖拽效果

1.clientY 指的是距离可视页面左上角的距离
2.pageY 指的是距离可视页面左上角的距离(不受页面滚动影响)
3.screenY 指的是距离屏幕左上角的距离
4.layerY 指的是找到它或它父级元素中最近具有定位的左上角距离
5.offsetY 指的是距离它自己左上角的距离

var dom = document.getElementById('id')
var sth = dom.getBoundingClientRect() // 里面装了很多东西

分清clientY pageY screenY layerY o
在我们想要做出拖拽这个效果的时候，我们需要分清这几个属性的区别，这几个属性都是计算鼠标点击的偏移值，我们需要对其进...
基于Vue实现拖拽效果
效果图分清clientY pageY screenY layerY offsetY的区别在我们想要做出拖拽这个...
基于Vue实现拖拽效果
效果图分清clientY pageY screenY layerY offsetY的区别在我们想要做出拖拽这个...
基于Vue实现元素拖拽效果
在实现拖拽效果时需要先理解clientY pageY screenY layerY offsetY的区别 clie...
clientY,offsetY,screenY/layerY,p
1.clientY鼠标在页面可视区域（不包括工具栏和滚动条）的位置。如果有滚动条，以滚动到的位置的可视区的左上角为...
Dom 坐标相关
MouseEvent clientX/clientY：相对客户端窗口的 X/Y 坐标 layerX/layerY：...
offsetX各种值总结
pageX: 页面X坐标位置pageY: 页面Y坐标位置 screenX: 屏幕X坐标位置screenY: 屏幕Y...
鼠标事件的坐标含义
一、clientX、clientY 点击位置距离当前body可视区域的x，y坐标二、pageX、pageY 对于...
js获取鼠标距离
一、clientX、clientY点击位置距离当前body可视区域x，y坐标。二、pageX、pageY对于整个页...
H5 实现下拉顶部放大
1.监听整个下拉区域的touchstart事件,并记录下pageY和clientY值 2.监听整个区域的touch...