clientX和clientY与x,y一样的,以浏览器显示区域的左上角开始,指鼠标的坐标。x,y是新浏览器支持 offsetX,offsetY,针对目标元素的左上角坐标,从padding开始。 layerX,layerY,往上找有定位属性的父元素的左上角(自身有定位属性的话就是相对于自身),都没有的话,就是相对于body的左上角 pageX,pageY相对页面左...
上图中 相对于“整个显示屏幕区域而言” 鼠标的x坐标是200px,y坐标是85px,所以screenX和screenY正是获取这两个值,所以screenX是200px,screenY是85px 当我的鼠标移动到div的右下角的时候,screeX是200px,screenY是185px,因为div本身的宽度我定义的时200px,高度100px; 接下来说一说offsetX和offsetY属性 offset...
可视区域:指的是浏览器页面可用的地方【不包含tab、前进后退刷新所占用区域、书签】 三、offsetX|offsetY 当鼠标点击、按下、移动时触发,可获取到该值。 offsetX|offsetY:以当前鼠标点击位置的元素左上角为基准点,相对于被操作元素本身来说的【当前鼠标触发点,距离当前元素左上角的距离,不会因为元素本身的滚动条...
offsetX、offsetY: 鼠标相对于事件源元素的X,Y坐标。比如说,我给黄色的盒子定义一个点击事件,则这个offset的坐标原点就在这个黄色盒子的左上角 clientX、clientY: 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。 pageX、pageY: 事件发生时鼠标相对于整个页面的坐标。整个页面是...
offsetY:当鼠标事件发生时,鼠标相对于事件源y轴的位置 当我们点击test按钮的时候触发onclick事件,这里test这个按钮就是事件源,所以通过offsetX和offsetY获取的坐标值就是相对于 test按钮这个事件源的; Test按钮自身的宽100px高50px;为了容易理解,我特意给按钮添加个margin:50px让大家看得效果明显一些; ...
clientY: 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条。 offsetX: 设置或获取鼠标指针位置相对于触发事件的(this)对象的 x 坐标。 offsetY :设置或获取鼠标指针位置相对于触发事件的(this)对象的 y 坐标。
4、offsetX和offsetY offsetX:鼠标点击位置相对于触发事件对象的水平距离 offsetY:鼠标点击位置相对于触发事件对象的垂直距离 具体参考这篇文章JS之clientX,clientY,screenX,screenY,offsetX,offsetY区别测试
在进行触摸事件处理时，经常需要模拟鼠标事件中的offsetX和offsetY属性。这些属性在电脑端实现相对简单，但在移动端却有额外的挑战。让我们一起探讨如何在touch事件中模拟这些属性。在电脑端，鼠标事件中的offsetX和offsetY能够准确获取鼠标相对于目标元素的位置，从而实现各种操作。而在移动端，touch事件虽然...
IE: offsetX 当鼠标事件发生的时候,鼠标相对于事件源X轴的位置 offsetY FF: layerX 当鼠标事件发生的时候,鼠标相对于事件源X轴的位置 layerY 下面简单代码实现事件源位置内容的获取: 代码语言:javascript 复制 鼠标.事件=function(e){ev=window.event||e;//为了兼容低版本ie和流行版本的符合w3c规则的浏览器前者...
点击位置距离当前body可视区域的x,y坐标 二、pageX、pageY 对于整个页面来说,包括了被卷去的body部分的长度 三、screenX、screenY 点击位置距离当前电脑屏幕的x,y坐标 四、offsetX、offsetY 相对于带有定位的父盒子的x,y坐标 五、x、y 和screenX、screenY一样 ...