移动端touch事件获取clientX, clientY

html5 移动端获取触摸点位置学习笔记 最近在做订餐系统,我负责的都是PC端的实现,虽然功能逻辑一样,但移动端的实现我只是旁观者,没有实践,搜了一些资料学习下。  1.touchstart事件        手指头触摸屏幕上的事件 2.touchmove        手指头在屏幕上滑动触发的事件 3.touchend         当手指从屏幕上离开的时候触发 利用jquery配合使用方法如 阅读详情
目有个交互需要实现手指滑动的交互,pc端使用mousedown,mousemove,mouseup监听实现。

但在ios设备上mousemove是不好监听的,同类的方法是touchstart,touchmove,touchend。

如何获取手指滑动时的坐标位置呢?

直接使用event.clientX是不起作用的,要使用event.changedTouches[0].clientX才好,

如果是jquery的event对象,使用event.originalEvent.changedTouches[0].clientX。

STM32进入HardFault_Handler时,如何找到问题所在? 当STM32进入HardFault_Handler时,定位问题发生的点 阅读详情

相关推荐

ROS2 Jazzy 学习路线图(2026最新)

摘要: ROS2 Jazzy(LTS版)是2026年长期支持版本,仅适配Ubuntu 24.04。本文提供WSL环境下的学习路线图: 环境搭建(1-2天):配置WSL2+Ubuntu 24.04,安装ROS2 Jazzy及图形工具(VcXsrv、VS Code)。 核心概念(3-5天):掌握节点、话题、服务等通信机制,使用turtlesim和小海龟仿真实践。 开发实战(7-10天):Python/C++节点开发,结合RViz2、Gazebo等工具完成多节点通信和避障项目。 进阶应用(10-15天):导航(N

zheng_ruiguo的专栏 640

手机端--1.手指拖动touchmove,e.touches[0].clientX

案例: 图片可以随着手指的拖动  而  变动 1.e.touches[0].clientX  手指横坐标 2.  最后所求  :  nowX, nowY  图片的横纵坐标    nowX =   手指横坐标  -    误差 3.   已知条件:  误差 deltaX = 手指横坐标 -  nowX  (一开始给个初始值)  deltaX   固定   手指初始按下   与  手指移动的过...

w3cgirl-赵娜的播客 6058

斗罗大陆叙事体系与战斗系统设计解析

在文学创作与游戏设计中,世界观构建和战斗系统设计是两大核心技术要素。世界观作为故事发生的背景框架,需要融合东西方文化元素并建立量化标准,如《斗罗大陆》中武魂觉醒与魂环等级体系。战斗系统则需突破简单数值对抗,发展出武魂特性、魂技组合与环境互动的三维体系,其中魂导器技术的引入展现了科技与魔法的创新融合。这些设计原理在RPG游戏开发、网络文学创作等领域具有广泛应用价值,特别是对需要长期运营的IP作品,完善的系统设定能有效支撑剧情延展与商业化开发。本文以现象级作品为例,剖析其武魂拟态理论和魂师工业化构思如何成就经典

weixin_29291069的博客 250

点击事件的坐标计算(client || offset) +(X || Width || Left) 各种排列组合别绕晕...

结论: 1,X,Y的都是属于点击位置的,width、height、left、top都是属于DOM的。 2,涉及的所有位置只与document或DOM内部有关,与DOM如何定位,周围有没有其他占位HTML元素,DOM有没有父级元素等统统无关。 说明:每次点击都是点击绿色方块的中心点,绿色方块的CSS代码如下: PC端:   属于点击位置:     1:clientX &&am...

weixin_30242907的博客 209

避坑指南:英飞凌TC3XX的MCMCAN初始化常见错误及解决方法

本文针对英飞凌TC3XX系列MCU的MCMCAN模块初始化难题,深入剖析了寄存器配置时序、总线监控模式误用、中断映射错误及Message RAM地址冲突四大常见陷阱。通过实战代码示例和诊断流程,提供了清晰的避坑指南和解决方案,帮助嵌入式开发者高效解决CAN FD通信故障,确保汽车电子与工业控制项目的稳定运行。

weixin_29193259的博客 246

ESP32-S3驱动PCA9685模块:I2C扩展16路舵机控制实战指南

本文提供了ESP32-S3通过I2C总线驱动PCA9685模块扩展16路PWM输出的完整实战指南。详细解析了PCA9685模块原理、硬件连接、I2C地址配置,并给出了核心驱动代码与角度控制函数,帮助开发者解决微控制器PWM引脚不足的问题,轻松实现多路舵机控制。

weixin_32005771的博客 522

JS 键盘事件、触摸事件

一、键盘事件:指当用户在操作键盘的时候会自动被触发的事件 keydown:键盘按下时触发 keypress:键盘按下时触发 功能键无法响应 keyup: 键盘抬起时触发 注意: 1.keydown keypress 按下不放一直触发; 2.keypress无法触发功能键 3.keypress无法捕获组合键 4.keypress 可以区分大写字母和小写字母 5.keydown 可以区分小键盘上...

boonyaxnn的博客 598

GCJ02坐标系转WGS84坐标系(已实地测试基本无偏差)

坐标系转化,GCJ02坐标系,WGS84坐标系

Xiao_XianYu_的博客 1857

手机端html5自动调用touch事件,移动端中touch事件的详解

本篇文章给大家带来的内容是关于移动端中touch事件的详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。1.touchstart当手指触碰屏幕时候触发dom.addEventListener('touchstart',function(e){});startX=e.touches[0].clientX;事件返回的e对象包含的移动端特有的属性:tarchTouches:目标元素的所...

weixin_42565971的博客 626

PADS VX2.4差分对设置避坑指南:常见错误与解决方案

本文深度解析了在PADS VX2.4中进行高速PCB设计时,差分对设置的核心要点与常见陷阱。针对Layout规则设置、Router布线实战中的阻抗控制、线长匹配等关键环节,提供了具体的避坑指南和解决方案,帮助工程师确保信号完整性,提升设计质量。

weixin_29216049的博客 360

基于结构的虚拟筛选模型 gnina 从源码编译

所需要的软件安装包: 安装 CUDA 装的时候看着点,第二个要你装驱动的选择,回答N,不装。 sudo sh cuda_10.0.130_410.48_linux.run sudo vim ~/.bashrc 在 ~/.bashrc 文件最后加上 export PATH=/usr/bin:/usr/local/cuda-10.0/bin${PATH} export LD_LIBRARY_PATH=/usr/local/cuda-10.0/lib64:${LD_LIBRARY_PATH} source ~

周迪新的博客 3189

JQuery中的事件对象

在jquery中不同的事件类型被指向新的属性originalEvent中,即originalEvent:touchEvent,所以访问touchEvent中的属性,需要前面加一个originalEvent,例如e.originalEvent.touches[0].clientX。注意:如果字符串就传递:‘123’、如果是数组就传递:[123,‘abc’],如果是对象就传递:{user : ‘Lee’, age : 100}。数组的调用方式是:e.data[1],对象的调用方式是:e.data.user。

m0_60721649的博客 969

笔试题-2023-加特兰-数字IC设计【纯净题目版】

笔试题-2023-加特兰-数字IC设计【纯净题目版】

w0shishabi的博客 2248

移动端touch事件获取clientX,clientY

目有个交互需要实现手指滑动的交互,pc端使用mousedown,mousemove,mouseup监听实现。 但在ios设备上mousemove是不好监听的,同类的方法是touchstart,touchmove,touchend。 如何获取手指滑动时的坐标位置呢? 直接使用event.clientX是不起作用的,要使用event.changedTouches[0].clientX才好, 如...

金溪的博客 2625

NTscan扫描工具

ntscan是一个扫描器,可以扫描没有密码和弱密码的共享,先到配置文件中填写猜测的用户名和密码,扫描过程中右侧出现的是扫描日志。

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

移动端touch触摸效果原生js,获取触摸坐标

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,

heyuqing32的博客 5123

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

html5 移动端的手指触屏事件

用户在移动端浏览H5的时候,会使用手指进行一连串的操作,单击、双击、上拉、下拉等等一系列操作,这里主要针对touch事件进行一些简单的介绍; 用户从手指触碰到屏幕到手指离开屏幕这中间,会触发一系列的touch事件: ①touchstart:当手指触碰到屏幕的时候触发 ②touchmove:当手指在屏幕上滑动的时候触发 ③touchend:当手指离开屏幕的时候时候触发 ④touchcan

kk_yanwu的博客 1万+

最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版

Part-E1-SDIO-Specification-Ver4.00-Final-120220.pdf:最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版,包括SDIO 接口的外设,SDIO 接口官方协议等。

小白笔记(手机端事件)

手机端事件 —————————————————————————————————— 在移动端需要做些什么,首先是事件不同,只需要在添加移动端的 touchatart 、 touchmove 、 touchend 就可以了,还有一个不同的时移动端获取坐标是 event.touches[0].clientX 和 event.touches[0].clientY 。 如果是PC端就使用event,如果是移...

Larry的博客 379

百度地图Javascript API 使用记录

百度地图JSAPI中,移动端获取点击标注相对于屏幕的位置

qq_37804939的博客 725

移动端 touch 滑动事件

移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成。但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。 以下是四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动式触发 touchend: ...

StarFishing 6153

移动端触摸(touch)事件

文章转摘于: https://www.cnblogs.com/cangqinglang/p/8794621.html touchstart:手指触摸到一个 DOM 元素时触发。 touchmove:手指在一个 DOM 元素上滑动时触发。  touchend:手指从一个 DOM 元素上移开时触发。 Touch 属性 事件对应的三个列表虽然名字不一样,但是它们里面装的东西都是差不多的,包含...

weixin_41017246的博客 1039

移动端touch事件 touchstart、touchmove、touchend

移动端touch事件 touchstart、touchmove、touchend touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。 touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。 touchend事件:当手指从屏幕上离开的时候触发。 touchcancel事件:当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间,文档中并没有具体说明,咱们只能去猜测了。 跟踪触摸的属性

m0_45857808的博客 841

移动端touch事件

touch事件是移动端特有的,pc端不支持 touchstart:开始触摸事件touchmove:手指滑动事件(持续触发)touchstend:触摸结束事件touchcancal:触摸意外中断事件(手机中途来电?) 1.基本用法 var div = docuemnt.querySelector('div'); div.addEventListener('touchstart'...

weixin_30662011的博客 942

移动端事件(touchstart+touchmove+touchend)

移动端事件有哪些: 触摸事件 手势事件 传感器事件 (后面两个兼容性不怎么样,因此重点就是触摸事件) 触摸事件: touch 事件 pointer 事件 (PC端可能会使用jQuery做动画,移动端一般不会,基本都是使用css3做动画) ontouchstart (必须在元素内部才能触发) ontouchmove (元素内外都能触发) ontouchend(元素内外都能触发) ontouchcancel 触摸中断,多用于系统级处理,比如在触摸时突然接了个电话(一般几乎是用不上的) 推...

qq_35382207的博客 1137

移动端前端常见的触摸相关的事件touch、tap、swipe等

一、click事件 单击事件,类似于PC端的click,但在移动端中,连续click的触发有200ms ~ 300ms的延迟   二、touch类事件(即触摸事件) touchstart:手指触碰到屏幕会触发; touchmove:手指在屏幕上移动会触发; touchend:手指离开屏幕会触发; touchcancel:可由系统进行的触发,比如手指触摸屏幕的时候,突然alert了一下...

Judy_qiudie 1455

html5移动端触摸事件touch

移动端主要的触摸事件有三个: touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。 touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。 touchend事件:当手指从屏幕上离开的时候触发。 还有一个有待验证的: touchcancel事件:当系统停止跟踪触摸的时候触发。

现在学习也不晚 8305
上一篇: 针对多点触控浏览器进行的开发
下一篇: Homebrew的安装与使用
FuDesign2008
博客等级 码龄18年 44粉丝 119原创
评论 5
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值