touch.pageX/touch.screenX/touch.clientX的区别

最新推荐文章于 2023-02-23 11:28:44 发布
最新推荐文章于 2023-02-23 11:28:44 发布
阅读量1.1k 收藏
点赞数
分类专栏： js 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33390316/article/details/114952110
版权
touch.pageX、touch.screenX和touch.clientX是JavaScript中用于处理触摸事件时获取X坐标的方法。pageX包含滚动偏移，screenX不考虑页面滚动但基于设备屏幕，clientX则不包含滚动偏移且随浏览器缩放变化。通过示例演示了三者在不同场景下的区别。
摘要由CSDN通过智能技术生成

摘定义：

pageX : 触点相对于HTML文档左边沿的的X坐标. 和 clientX 属性不同, 这个值是相对于整个html文档的坐标, 和用户滚动位置无关. 因此当存在水平滚动的偏移时, 这个值包含了水平滚动的偏移.

screenX : 返回触点相对于屏幕左边沿的的X坐标. 不包含页面滚动的偏移量.

clientX : 返回触点相对于可见视区(visual viewport)左边沿的的X坐标. 不包括任何滚动偏移.这个值会根据用户对可见视区的缩放行为而发生变化.

具体差别如下：
做了一个带滚动条的demo。在这里插入图片描述

当我们正常点击时，返回的内容都是相同的，都是距离最左侧的距离。在这里插入图片描述

而当我们拖动滚动条时，再点击中间某个地方，发现pageX的值明显大于另外两个，那么我们容易知道，pageX相对左侧的距离是包含滚动条的距离，而其余

最低0.47元/天 解锁文章
relous丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5手机触屏touch事件介绍
10-22
本文主要介绍html5手机触屏touch事件，简单举例，需要的朋友可以参考下。
screenX clientX pageX的区别
weixin_34224941的博客
04-14 138
screenX clientX pageX概念 screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。 clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。 pageX：参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动 如图(红点就是鼠标当前位置) ...
pagex，screenx，clientx的区别
kateLi的专栏
07-09 1331
screenX：参照物为电脑的屏幕左上角，距离电脑屏幕的水平距离 clientX：参照物是内容区域左上角，距离内容区域左上角的水平距离，会随着滚动条的移动而移动 pageX：参照物也是内容区域的左上角，距离内容区域左上角的水平距离，但是不会随着滚动条的移动而移动
微信小程序之触摸滑动事件案例+Slideview组件【手动左滑删除效果】
XH_jing的博客
11-19 3967
前言： 现在很多程序上都有左滑删除的效果，其实实现很简单，今天我们主要来记录一下小程序的左滑删除的实现过程。 效果图： 实现效果： 当我们在该条记录上进行左滑操作时，整条记录跟着向左移动，同时右侧的删除按钮会显示出来。 当我们点击删除按钮时，就会把该条记录删除掉。 如果不想删除该记录，可以右滑取消，或者随意点击一个位置都可以使右侧的删除按钮隐藏回到原样。 设计思路： 首先在页面上每条 item 记录分为上下两层，上面的 view 包裹正常展示的内容，下面的 view 存放左滑的显示的内容； 元素移
移动端触摸（touch）事件
04-11 501
移动端时代已经到来，作为前端开发的我们没有理由也不应该坐井观天，而是勇敢地跳出心里的那口井，去拥抱蔚蓝的天空。该来的总会来，我们要做的就是接受未知的挑战。正如你所看到的，这是一篇关于移动端触摸事件的文章，也就是我们平时在手机中用得最多的动作：touch。现在让我们开始 touch touch touch 吧！ Touch 事件 首先 touch 包含三类事件，它们分别是：to...
【JS教程】移动端 Touch（触摸）事件
我的博客
07-29 8038
最基本的touch事件包括4个事件： 1. touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。 2. touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。 3. touchend事件：当手指从屏幕上离开的时候触发。 4. touchcancel事件：当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的touch操作，即触发touchcancel。...
H5 touch事件处理
Liu
08-16 722
touch事件处理
document-create-touch.rar_touch
09-24
document.createTouch(view, target, identifier, screenX, screenY, clientX, clientY, pageX, pageY, radiusX, radiusY, rotationAngle, force) ``` 参数解释如下： 1. `view`：通常为`window`对象，表示触控...
document-create-touch-list.rar_touch
09-24
3. `screenX` 和 `screenY`：触摸点在屏幕坐标系的位置。 4. `clientX` 和 `clientY`：触摸点在浏览器视口内的位置。 5. `pageX` 和 `pageY`：触摸点相对于整个HTML文档的位置。 6. `radiusX` 和 `radiusY`：触摸的...
javascript移动开发中touch触摸事件详解.docx
01-18
JavaScript 移动开发中 Touch 触摸事件详解 JavaScript 移动开发中 Touch 触摸事件是指在移动设备上，用户通过触摸屏幕来交互的事件。这些事件包括 touchstart、touchmove 和 touchend 三种类型。Touch 事件对象是...
javascript移动开发中touch触摸事件详解
10-22
在JavaScript移动开发中，触摸事件（Touch Events）是处理用户在触摸屏设备上与界面交互的关键部分。这些事件主要用于响应用户的触摸操作，如触摸开始、移动和结束。本篇文章将详细解析JavaScript中的touch触摸事件...
触屏事件 touch
Gnaf12345的博客
05-25 461
触屏包括的事件： touchstart当手指触摸屏幕时触发 touchmove当手指在屏幕上滑动时连续触发 touchend当手指从屏幕上移开时触发 touchcancel当系统停止跟踪触摸时触发 每个touch事件都包括 touches targetTouches chnageTouches touch的属性： clientX 触摸目标在视口中的x坐标1 clientY 触摸目标在视口中的y坐标 pageX触摸目标在页面中的x坐标 pageY触摸目标在页面中的y坐标 screenX触摸
jq使用touch事件client值为undefined的解决方法
qq_40128591的博客
09-04 1339
因为他是数组类的，需要定义下标。 $(".tabel").on('touchmove',function(event){ console.log(event); }); 如果直接console.log(event)的话我们看到的clientX和clientY都是undefined 所以我们要写成这样 $(".tabel").on('touchmove',function(event){...
移动端touch事件获取clientX, clientY
热门推荐
FuDesign2008的专栏
07-27 2万+
目有个交互需要实现手指滑动的交互，pc端使用mousedown,mousemove,mouseup监听实现。 但在ios设备上mousemove是不好监听的，同类的方法是touchstart,touchmove,touchend。 如何获取手指滑动时的坐标位置呢? 直接使用event.clientX是不起作用的，要使用event.changedTouches[0].clientX才好,
移动端的touch事件
m0_67301837的博客
02-23 398
每个触摸事件的event对象都提供了在鼠标事件中常见的属性bubbles、cancleable、view、clientX、clientY、screenX、screenY等。changeTouches：自上次触摸以来发生哪些改变的Touch对象的数组（即当前事件的手指动作的列表）。targetTouches：特定于事件目标的Touch对象的数组（即当前DOM元素上的手指动作的列表）。touches：当前跟踪的触摸操作的touch对象的数组（即当前屏幕上的所有手指动作的列表）。上述事件都会冒泡，也都可以取消。
微信小程序 事件
Blue的博客
05-22 389
什么是事件事件是视图层到逻辑层的通讯方式。事件可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。事件对象可以携带额外信息，如id, dataset, touches。事件的使用方式在组件中绑定一个事件处理函数。如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。<view id="tapTes...
手机端拖拽事件，获取pageX和pageY坐标方式
web前端开发-linglong
10-10 1万+
手机端拖拽事件： touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。 touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。 touchend事件：当手指从屏幕上离开的时候触发。 touchcancel事件：当系统停止跟踪触摸的时候触发。
触摸事件(touchstart、touchmove和touchend)
ssisse的博客
07-13 1571
HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件：touchstart、touchmove和touchend。 一开始触摸事件touchstart、touchmove和touchend是iOs版Safari浏览器为了向开发人员传达
html5 touch 事件,html5 touch事件的几个问题
weixin_39618597的博客
06-05 136
1.touchmove事件如何 不偏移 地拖拽一个元素？比如下面这段代码obj.addEventListener("touchmove",tm,false);function tm(event) {var touch = event.touches[0];obj.style.marginLeft = touch.pageX+'px';}因为每次拖拽的时候，获取到pageX，然后将其赋值给margi...
怎么计算event.pageX的最大值
最新发布
07-15
要计算 `event.pageX` 的最大值，你需要考虑页面的宽度以及滚动条的位置。以下是一种常见的计算方法： ```javascript var maxPageX = Math.max( document.documentElement.scrollWidth, document.body....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值