首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何获取触摸事件点相对于目标元素的x坐标?

要获取触摸事件点相对于目标元素的x坐标,可以通过以下步骤实现:

  1. 监听触摸事件:在前端开发中,可以使用JavaScript来监听触摸事件。常见的触摸事件包括touchstart(手指触摸屏幕)、touchmove(手指在屏幕上滑动)、touchend(手指离开屏幕)等。
  2. 获取触摸点坐标:在触摸事件的回调函数中,可以通过event对象获取触摸点的坐标信息。对于触摸事件,event对象中会包含一个touches属性,该属性是一个触摸点列表。通过touches列表中的第一个元素,可以获取到触摸点的坐标信息。
  3. 计算相对坐标:获取到触摸点的坐标后,需要计算其相对于目标元素的x坐标。可以使用目标元素的getBoundingClientRect()方法获取目标元素相对于视口的位置信息。然后,将触摸点的x坐标减去目标元素的左边界位置,即可得到相对坐标。

以下是一个示例代码:

代码语言:txt
复制
// 监听触摸事件
targetElement.addEventListener('touchstart', function(event) {
  // 获取触摸点坐标
  var touch = event.touches[0];
  var touchX = touch.clientX;
  
  // 获取目标元素相对于视口的位置信息
  var targetRect = targetElement.getBoundingClientRect();
  var targetLeft = targetRect.left;
  
  // 计算相对坐标
  var relativeX = touchX - targetLeft;
  
  // 在这里可以使用相对坐标进行后续操作
});

这样,你就可以获取触摸事件点相对于目标元素的x坐标了。

对于云计算领域的相关知识和腾讯云产品介绍,可以参考腾讯云官方文档:https://cloud.tencent.com/document/product/。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JS中touch事件与canvas绘图

Touch 对象:触摸起始于当前事件目标 element 上,并且仍然没有离开触摸平面的触点。...用第二个手指接触屏幕,此时,touches有两个元素,每个手指触摸为一个值。...,返回鼠标指针相对于文档水平坐标 pageY 触发鼠标事件时,返回鼠标指针相对于文档垂直坐标 screenX 触发事件时,返回鼠标指针相对于屏幕水平坐标 screenY 触发事件时,返回鼠标指针相对于屏幕垂直坐标...offsetX 返回鼠标指针相对于目标元素边缘位置水平坐标 offsetY 返回鼠标指针相对于目标元素边缘位置垂直坐标 movementX 返回鼠标指针相对于上一个mousemove事件位置水平坐标...movementY 返回鼠标指针相对于上一个mousemove事件位置垂直坐标 target 返回与触发鼠标事件元素相关元素 which 返回触发鼠标事件时按下鼠标按钮 altKey 返回触发鼠标事件时是否按下

7.3K41

10-移动端开发教程-移动端事件

2.2 touchstart事件 ​ 当用户手指触摸触摸时候触发。事件对象 target 就是touch 发生位置那个元素。 点击我!...2. screenX 触摸相对于屏幕左边缘 x 坐标。 3. screenY 触摸相对于屏幕上边缘 y 坐标。 4. clientX 触摸相对于浏览器 viewport左边缘 x 坐标。...不会包括左边滚动距离。 5. clientY 触摸相对于浏览器 viewport上边缘 y 坐标。不会包括上边滚动距离。...6. pageX 触摸相对于 document左边缘 x 坐标。 与 clientX 不同是,他包括左边滚动距离,如果有的话。...7. pageY 触摸相对于 document左边缘 y 坐标。 与 clientY 不同是,他包括上边滚动距离,如果有的话。

6.4K70

10-移动端开发教程-移动端事件

如何用户手指从触屏设备边缘移出了触屏设备,也会触发 touchend 事件。 touchend 事件 target 也是与 touchstart target 一致,即使已经移出了元素。...2. screenX 触摸相对于屏幕左边缘 x 坐标。 3. screenY 触摸相对于屏幕上边缘 y 坐标。 4. clientX 触摸相对于浏览器 viewport左边缘 x 坐标。...不会包括左边滚动距离。 5. clientY 触摸相对于浏览器 viewport上边缘 y 坐标。不会包括上边滚动距离。...6. pageX 触摸相对于 document左边缘 x 坐标。 与 clientX 不同是,他包括左边滚动距离,如果有的话。...7. pageY 触摸相对于 document左边缘 y 坐标。 与 clientY 不同是,他包括上边滚动距离,如果有的话。

6.7K80

如何实现一个丝滑点击水波效果

// 首先获取元素上存储数据 const _ripple = this....(element: RippleHTMLElement, event: TouchEvent): RippleStyles { // ... // 手指点击位置相对于被点击元素坐标 const...y, centerX, centerY, size } } size为水波圆直径;手指点击位置是水波圆初始中心,然后计算其左上角坐标x、y为水波元素初始位置;水波圆最终中心其实就是被点击元素中心...因为水波元素为被点击元素元素,所以这些坐标都是相对于被点击元素左上角坐标计算: 从绿色圆过渡成红色圆,透明度、大小、位置变化就是水波扩散效果。...到这里,水波效果创建和移除就都介绍完了,可以看到这种实现方式对目标元素还是有一定要求,如果目标元素样式布局需要设置position、overflow、z-index属性为不符合要求值,那么直接修改可能就会导致样式出现问题

56420

第127天:移动端-获取触摸位置

一、移动端轮播图滑动 1、先获取手指在轮播图元素滑动方向(左右) (1)手指触摸开始时记录手指所在坐标X (2)获取界面上轮播图容器 var $carousels=$('.carousel')...; (3)注册滑动事件 (4)变量重复赋值 (5)结束触摸一瞬间记录最后手指所在坐标X (6)比较开始和结束坐标大小 (7)控制精度 获取每次手指滑动距离,当距离大于一定值时,就认为有方向变化...next':'prev'); 40 41 42 43 } 二、移动端获取触摸方式说明 1.touchstart事件        手指头触摸屏幕上事件 2.touchmove...clientX:触摸目标在视口中x坐标。 clientY:触摸目标在视口中y坐标。 identifier:标识触摸唯一ID。 pageX:触摸目标在页面中x坐标。...pageY:触摸目标在页面中y坐标。 screenX:触摸目标在屏幕中x坐标。 screenY:触摸目标在屏幕中y坐标。 target:触目的DOM节点目标

1.4K20

「移动端」touch事件,touchEvent对象

打印函数返回 event 对象,发现有很多参数,如图: 1.2、touchEvent 对象属性 targetTouches - 当前元素目标上 touch 列表。...我们发现它们都是一个数组,每个元素代表一个触摸。每个触摸对应 都有一些重要属性,分别为: clientX - 触摸点在可视区 x 坐标。 clientY - 触摸点在可视区 y 坐标。...pageX - 触摸点在网页上 x 坐标。 pageY - 触摸点在网页上 y 坐标。 screenX - 触摸点在屏幕中 x 坐标。 screenY - 触摸点在屏幕中 y 坐标。...identifier - 触摸唯一标识 id。 target - 触摸 DOM 节点。 二、触摸分类 很多情况下触摸事件会分为两种,单点触发和多点触发。...单点触发,指一个指头在屏幕触摸、滑动,主要应用在下拉刷新,手机端banner滑动切换等。 注意:如果是单点触摸,但是有多个手指同时触发,此时需要求三个平均值作为触摸

1.1K30

「移动端」touch事件,touchEvent对象

打印函数返回 event 对象,发现有很多参数,如图: 1.2、touchEvent 对象属性 targetTouches - 当前元素目标上 touch 列表。...我们发现它们都是一个数组,每个元素代表一个触摸。每个触摸对应 都有一些重要属性,分别为: clientX - 触摸点在可视区 x 坐标。 clientY - 触摸点在可视区 y 坐标。...pageX - 触摸点在网页上 x 坐标。 pageY - 触摸点在网页上 y 坐标。 screenX - 触摸点在屏幕中 x 坐标。 screenY - 触摸点在屏幕中 y 坐标。...identifier - 触摸唯一标识 id。 target - 触摸 DOM 节点。 二、触摸分类 很多情况下触摸事件会分为两种,单点触发和多点触发。...单点触发,指一个指头在屏幕触摸、滑动,主要应用在下拉刷新,手机端banner滑动切换等。 注意:如果是单点触摸,但是有多个手指同时触发,此时需要求三个平均值作为触摸

1.9K20

「移动端」touch事件,touchEvent对象

打印函数返回 event 对象,发现有很多参数,如图: 1.2、touchEvent 对象属性 targetTouches - 当前元素目标上 touch 列表。...我们发现它们都是一个数组,每个元素代表一个触摸。每个触摸对应 都有一些重要属性,分别为: clientX - 触摸点在可视区 x 坐标。 clientY - 触摸点在可视区 y 坐标。...pageX - 触摸点在网页上 x 坐标。 pageY - 触摸点在网页上 y 坐标。 screenX - 触摸点在屏幕中 x 坐标。 screenY - 触摸点在屏幕中 y 坐标。...identifier - 触摸唯一标识 id。 target - 触摸 DOM 节点。 二、触摸分类 很多情况下触摸事件会分为两种,单点触发和多点触发。...单点触发,指一个指头在屏幕触摸、滑动,主要应用在下拉刷新,手机端banner滑动切换等。 注意:如果是单点触摸,但是有多个手指同时触发,此时需要求三个平均值作为触摸

99030

touch事件,touchEvent对象

打印函数返回 event 对象,发现有很多参数,如图: 1.2、touchEvent 对象属性 targetTouches - 当前元素目标上 touch 列表。...我们发现它们都是一个数组,每个元素代表一个触摸。每个触摸对应 都有一些重要属性,分别为: clientX - 触摸点在可视区 x 坐标。 clientY - 触摸点在可视区 y 坐标。...pageX - 触摸点在网页上 x 坐标。 pageY - 触摸点在网页上 y 坐标。 screenX - 触摸点在屏幕中 x 坐标。 screenY - 触摸点在屏幕中 y 坐标。...identifier - 触摸唯一标识 id。 target - 触摸 DOM 节点。 二、触摸分类 很多情况下触摸事件会分为两种,单点触发和多点触发。...单点触发,指一个指头在屏幕触摸、滑动,主要应用在下拉刷新,手机端banner滑动切换等。 注意:如果是单点触摸,但是有多个手指同时触发,此时需要求三个平均值作为触摸

90630

html5简单拖拽实现自动左右贴边+幸运大转盘

注意如果不是写在行内style中属性都不能通过id.style.atrr来获取。 touch事件 touch事件模型现阶段规定了很多种类型触摸事件,以下三种是应用最广泛: 1. ...表示当前跟踪触摸操作touch对象数组。 targetTouches:特定于事件目标的Touch对象数组。...changeTouches:表示自上次触摸以来发生了什么改变Touch对象数组。 每个Touch对象包含属性如下。 clientX:触摸目标在视口中x坐标。...clientY:触摸目标在视口中y坐标。 identifier:标识触摸唯一ID。 pageX:触摸目标在页面中x坐标。(触摸相对于页面的位置) pageY:触摸目标在页面中y坐标。...screenX:触摸目标在屏幕中x坐标。 screenY:触摸目标在屏幕中y坐标。 target:触目的DOM节点目标

4.2K50

vue ---- 实现手机端(左滑 删除。右划 正常)

至于系统什么时候会取消,不详 client / clientY:// 触摸相对于浏览器窗口viewport位置 pageX / pageY:// 触摸相对于页面的位置 screenX /...screenY:// 触摸相对于屏幕位置 identifier: // touch对象unique ID http://blog.sina.com.cn/s/blog_65c2ec5e0101fexw.html...至于系统什么时候会取消,不详 属性 1.client / clientY:// 触摸相对于浏览器窗口viewport位置 2.pageX / pageY:// 触摸相对于页面的位置...3.screenX /screenY:// 触摸相对于屏幕位置 4.identifier: // touch对象unique ID //touchstart事件 function...]; //获取第一个触点 var x = Number(touch.pageX); //页面触点X坐标 var y = Number(touch.pageY); //页面触点Y坐标

1.9K20

多种方法实现Appium屏幕滑动:让用户仿真动作更简单

在 Appium 中提供了多种方式来实现模拟用户滑动屏幕动作。滑动操作场景移动端应用中滑动场景,大致有如下几种类型:触摸事件模拟:滑动操作基本原理是模拟用户触摸屏幕行为。...通过发送一系列触摸事件,模拟用户按住、滑动和释放动作,可以实现在屏幕上滑动效果。坐标计算:滑动操作通常涉及到起始点和终点坐标计算,起始点表示滑动起始位置,终点表示滑动结束位置。...这些坐标可以是相对于屏幕或特定元素坐标。惯性滑动:有些滑动操作在用户释放手指后还会继续滑动一段距离,模拟惯性滑动效果,这通常需要在滑动过程中模拟逐渐减速过程。...滑动方式swipe 方法从一个滑动到另一个,可选择持续时间,具有滑动惯性。需要参数如下:start_x:开始坐标 x。start_y:开始坐标 y。end_x:结束坐标 x。...Python 实现def test_swipe_views(self): # 从一个滑动到另一个,可选择持续时间 ''' start_x: 开始坐标 x start_y: 开始坐标

20910

Android Scroll分析

所以要实现View滑动,必须要监听用户触摸事件,并根据事件传入坐标,动态且不断改变View坐标,从而实现View跟随用户触摸滑动而滑动。...在Android中,将屏幕最左上角顶点作为Android坐标原点,从这个向右是X正方向,从这个向下是Y轴正方向。 ?.../ 获取当前输入X、Y坐标(视图坐标) int x = (int)event.getX(); int y = (int)event.getY(); switch(event.getAction...---- 实现滑动七种方法 不管使用何种方法,其实现基本思路是一致:当触摸View时,系统记下当前触摸坐标,当手指移动时,系统记下移动后触摸坐标,从而获取相对于前一次坐标偏移量,并通过偏移量来修改...同样,可以通过修改View left top right bottom四个属性来控制View坐标。 在每次回调onTouchEvent方法时候,我们都来获取一下触摸坐标

79320

【Android 应用开发】Android 组件 位置坐标 属性 ( 组件位置属性 | 父容器坐标坐标 | 窗口坐标坐标 | 屏幕坐标坐标 | 触摸坐标 )

View 组件触摸位置 属性 VII . View 坐标获取 0 解决方案 I ...., translationY 分别是相对于 left , top 值偏移大小 ; left + translationX = x , top + translationY = y ; 窗口坐标获取...: getLocationInWindow ; 屏幕坐标获取 : getLocationOnScreen ; 触摸坐标 : x , y 触摸坐标相对于组件坐标 , rawX , rawY 是相对于屏幕坐标...View 组件触摸位置 属性 ---- View 组件触摸事件位置属性 : ① x , y 相对于组件坐标 : 当触摸组件时 , 从 MotionEvent 事件获取 x , y 坐标相对于本组件坐标..., 即坐标原点 ( 0, 0 ) 是该组件左上角位置 ; ② rawX , rawY 相对于屏幕坐标 : 从 MotionEvent 事件获取 rawX , rawY 坐标 , 是当前触摸相对于屏幕坐标

4K10

移动端touch事件处理

targetTouches:特定于事件目标的Touch对象数组。  changeTouches:表示自上次触摸以来发生了什么改变Touch对象数组。每个Touch对象包含属性如下。  ...clientX:触摸目标在视口中x坐标。  clientY:触摸目标在视口中y坐标。  identifier:标识触摸唯一ID。  pageX:触摸目标在页面中x坐标。  ...pageY:触摸目标在页面中y坐标。         screenX:触摸目标在屏幕中x坐标。screenY:触摸目标在屏幕中y坐标。  target:触目的DOM节点目标。...那么我们继续看看,如果是多个进行操作呢,如果是多个的话,会不会有什么区别呢?首先,先把滑动区域进行限制,此时滑动区域值限制在页面中有边框区域。...targetTouches属性,却是要只有在被绑定元素本身之上触发,才会被保存到targetTouches属性中去,因为之前demo里,是把touchstart事件绑定到了document对象上,所以导致该属性获取值域

1.6K20

触摸事件 touchstart、touchmove、touchend

目录 触摸事件概述 触摸事件编码 触摸手指个数分析 触摸目标 DOM 元素分析 触摸位置分析 ---- 触摸事件概述 1、HTML5 中, PC 端基于鼠标的界面互动主要是单击, 移动端界面交互方式主要是触摸...触摸结束,手指离开屏幕时 是 touchcancel 触摸被取消,当系统停止跟踪触摸时候触发 否 3、每个触摸事件都包括了三个触摸列表,每个列表里包含了对应一系列触摸(用来实现多点触控):...4、每个 Touch 对象包含属性如下: clientX:触摸目标在视口中x坐标。 clientY:触摸目标在视口中y坐标。 identifier:标识触摸唯一ID。...pageX:触摸目标在页面中x坐标。 pageY:触摸目标在页面中y坐标。 screenX:触摸目标在屏幕中x坐标。 screenY:触摸目标在屏幕中y坐标。...target:触摸DOM节点目标触摸事件编码 <!

1.6K20
领券