原生touch事件

最新推荐文章于 2023-11-11 11:16:29 发布
最新推荐文章于 2023-11-11 11:16:29 发布
阅读量403 收藏
点赞数
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Listner/article/details/104189305
版权

使用原因：
click事件在移动端存在30毫秒的延迟，影响用户体验，故使用touch事件替换移动端的click事件
原生事件：

  • touchstart 开始触碰
  • touchmove 触碰移动
  • touchend 触碰结束

上述三个原生事件每个都有三个触摸列表：

  • touches 当前触摸到屏幕的手指列表
  • targetTouches 触摸到当前绑定有事件的元素
  • changedTouches 涉及到当前事件的手指列表

ev.targetTouches

Listener丶
关注
专栏目录
js原生touch事件实现微信语音按住录音，上滑取消。
天下大师傅
10-31 1万+
由于在微信公众号上要开发语音聊天功能，前端需求就需要有一个类似微信的语音聊天，我看了下微信的语音，操作流程就是按住录音，滑动超出一定距离就取消发送。 需求确定了，下面就是敲代码了 lee-voice *{ margin: 0; padding: 0; } html,body{ background: #fff; } .btn{ pos
vue20的touch事件原生事件注册无依赖体积小1K
08-12
标题中的"vue20的touch事件原生事件注册无依赖体积小1K"意味着我们将讨论一个专注于在Vue 2.0中使用触摸事件的方法，该方法不仅直接利用了JavaScript的原生事件，而且实现了轻量化，整个插件或解决方案的体积小于1KB...
[js点击]JavaScript之原生触摸事件详解01
图解AI
11-20 1万+
AJAX 浏览器与服务器之间，采用HTTP协议通信。用户在浏览器地址栏键入一个网址，或者通过网页表单向服务器提交内容，这时浏览器就会向服务器发出HTTP请求。1999年，微软公司发布IE浏览器5.0版，第一次引入新功能：允许JavaScript脚本向服务器发起HTTP请求。这个功能当时并没有引起注意，直到2004年Gmail发布和2005年Google Map发布，才引起广泛重视。2005年2月，A
移动端开发 原生touch事件使用
乜寿好
03-07 1741
概述： 开发移动端也有一段时间了，开发中经常用touch事件，最近琢磨了琢磨这touch事件到底是怎么回事，理解的也比较肤浅，但是希望能帮到大家。 前言： 移动端的touch事件最早出现在包含iOS2.0软件的iPhone 3G发布时，含了一个新版本的Safari浏览器。这款新的移动Safari提供了一些与触摸(touch)操作相关的新事件。 之后随着触屏手机的大行其道，触
原生js实现移动端touch事件，解决穿透问题
lulula的博客
07-30 9328
四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动式触发 touchend: //手指离开屏幕时触发 touchcancel: //系统取消touch事件的时候触发 每个触摸事件被触发后，会生成一个event对象，event对象里额外包括以下三个触摸列表 touches: //当前屏幕...
绑定touchstart事件(原生js)，小心击穿问题
songtaiwu的博客
03-06 6041
原理：本质就是通过js获取对应的元素，对其绑定touchstart事件.实例：购物车弹窗中有商品列表，可以编辑每个商品的数量，即每个商品有个-+按钮。在手机设备打开的H5中，click事件有300ms的延时，如下可以加快点击后的处理速度。//+操作var obj = document.getElementsByClassName('GGAddBtn');$.each(obj,function(i,...
原生touch事件实现简易轮播
luck_lin
05-08 395
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scal
懒人原生touch事件，计算滑动距离
06-12
效果描述： 在做移动手机网页的时候，相信很多懒友都碰到过这样的问题： 如何得到手机在屏幕上滑动的距离，其实很简单 ... 每次的滑动包含触摸、滑动、结束，这主要三个过程 ... 2、将body中的代码部分拷贝到你...
html5 touch事件实现触屏页面上下滑动(二)
09-28
首先，我们需要理解几个关键的touch事件：touchstart、touchmove和touchend。这些事件分别对应于用户触摸屏幕开始、移动手指在屏幕上以及手指离开屏幕的时刻。 - touchstart事件：当手指触摸屏幕时触发。这可以用来...
javascript移动开发中touch触摸事件详解
10-22
在处理touch事件时，需要注意的一个细节是，当你使用像jQuery这样的库时，事件对象可能不是原生的事件对象。例如，当你使用`on()`函数并传入第二个选择器参数时，可能会遇到`e.touches[0]`返回`undefined`的情况。这...
Javascript移动端触屏滑动事件详解
最新发布
tianxianghuiwei的博客
11-11 2129
同样首先阻止页面的滚屏行为，touchmove触发后，会生成一个event对象，在event对象中获取touches触屏列表，取得第一个touch,并记下pageX,pageY的坐标，算出差值，得出手指滑动的偏移量，使当前DOM元素滑动。触发touchstart事件后，会产生一个event对象，event对象里包括触摸列表，获得屏幕上的第一个touch,并记下其pageX,pageY的坐标。changedTouches: //涉及当前事件的手指的列表，尽量使用这个代替touches。
JavaScript移动端的手指触摸touch事件
weixin_48602044的博客
07-07 2178
JavaScript移动端的手指触摸touch事件
「移动端」touch事件，touchEvent对象
前端人的博客
08-25 2015
随着智能手机普及，有越来越多的手机网页和网页版游戏，手机触摸、移动、旋转等等，多种操作。一般电脑的人机交互靠的是鼠标，而手机用的就是触摸。区别有： PC 端一个电脑只能有一个鼠标，而移动端有多点触摸。 PC 端添加效果使用 mouseup、mousedown、mousemove，而移动端使用的 touchstart、touchmove、touchend 。 一、touch事件类型 touchstart - 手指触摸屏幕，在元素上按下时触发 touchmove - 手指移动，在元素上按下之后屏幕上任意
HTML5触摸事件(touchstart、touchmove和touchend)
热门推荐
fuqinyijiu的专栏
11-20 22万+
HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件：touchstart、touchmove和touchend。 　　一开始触摸事件touchstart、touchmove和touchend是iOs版Safari浏览器为了向开发人员
手机端拖拽事件，获取pageX和pageY坐标方式
web前端开发-linglong
10-10 1万+
手机端拖拽事件： touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。 touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。 touchend事件：当手指从屏幕上离开的时候触发。 touchcancel事件：当系统停止跟踪触摸的时候触发。
移动端原生手势事件
weixin_43294560的博客
08-13 1019
touchstart 当手指接触屏幕时触发 touchmove 当已经接触屏幕的手指开始移动的时候触发 touchend 当手指离开屏幕时触发 touchcancel 可由系统进行的触发，比如手指触摸屏幕的时候，突然alert了一下，或者系统中其他打断了touch的行为，则可以触发该事件 1、由于触摸会导致屏幕动来动去,使用时先阻止默认事件 event.preventDefault() 2、event对象包含的额外参数 (1)touches：表示当前跟踪的触摸操作的touch对象的数组。
JavaScript中 Touch 事件详解
明天也要努力的博客
11-24 5024
touch 事件： touchstart 事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发； touchmove 事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用 preventDefault() 事件可以阻止滚动； touchend 事件：在用户从元素上移开手指时会发生。 touchcancel 事件：在触摸事件被中断时发生。不同的设备会在不同的动作中中断触摸事件，如果发生这种“错误”，那么包含此事件来清理代码被认为是一种好习惯。 ...
移动端事件、对象
Nieyigo的博客
10-15 348
2020年10月14日真是痛苦的一天 触屏事件
JavaScript手机端触摸移动事件
qq_42940241的博客
05-15 1853
原文参考链接 为什么要模拟这些事件？ 1、上述这些事件中，浏览器直接支持的事件只有点击，而其它事件使用频率也很高。 2、移动端web原生点击事件会有300ms的延迟，因为用户肯能双击，为了判断用户是单击还是双击，所以会有这个延迟，这个延迟会衍生很多问题，例如点击穿透。所以我们可以不用原生的点击事件，而使用模拟点击事件。 如何模拟这些事件呢？ 我们可以总结这些操作，都是手指先触摸屏幕，然后在离开。不同点在于滑动事件手指有位移，而点击事件手指没有位移。 首先想到的就是所有浏览器都是支持touchstart、to
Sencha Touch 2.0快速入门：打造原生感Web App
Sencha Touch 是一款用于构建移动Web应用的框架，它允许开发者创建出与原生应用相似的用户体验，利用HTML5、CSS3和JavaScript技术。这款框架的主要特点包括： 1. **基于最新WEB标准**：Sencha Touch 建立在HTML5、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值