移动端 js touch事件

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

触摸事件包含4个接口。

TouchEvent

代表当触摸行为在平面上变化的时候发生的事件.

Touch

代表用户手指与触摸平面间的一个接触点.

TouchList

代表一系列的Touch; 一般在用户多个手指同时接触触控平面时使用这个接口.

DocumentTouch

包含了一些创建 Touch对象与TouchList对象的便捷方法.

事件类型：

touchstart : 触摸开始（手指放在触摸屏上）

touchmove : 拖动（手指在触摸屏上移动）

touchend : 触摸结束（手指从触摸屏上移开）

touchenter ：移动的手指进入一个dom元素。

touchleave ：移动的手指离开一个dom元素。

还有一个touchcancel，是在拖动中断时候触发。

事件属性：

altKey : 该属性返回一个布尔值，表示在指定的事件发生时，Alt 键是否处于按下状态， event.altKey=true|false|1|0

type : 触摸时触发的事件类型，比如touchstart

每个触摸事件都包括了三个触摸属性列表：

  1. touches：当前位于屏幕上的所有手指触摸点的一个列表。

  2. targetTouches：当前元素对象上所有触摸点的列表。

  3. changedTouches：涉及当前事件的触摸点的列表。

它们都是一个数组，每个元素代表一个触摸点。

每个触摸点对应的Touch都有三对重要的属性，clientX/clientY、pageX/pageY、screenX/screenY。

其中screenX/screenY代表事件发生的位置对于屏幕的偏移量，clientX/clienYt和pageX/pageY都代表事件发生位置对应对象的偏移量，不过区别是clientX/clientY不包括对象滚动而隐藏的偏移量，而pageX/pageY包括对象滚动而隐藏的偏移量。移开屏幕的那个触摸点，只会包含在changedTouches列表中，而不会包含在touches 和targetTouches 列表中， 所以changedTouches在项目当中会比较常用。

proxy_
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动端触摸事件
一只认学的程序猿
10-03 656
触摸事件touch 与pc端一样，移动端也有自己的事件，不同的就是将pc端的鼠标，变成了人手。 触摸事件touch在pc端是无效的，在开发者工具的移动端模拟器时，鼠标的点击事件就会变为触摸事件，是有效的。 触摸事件允许多点触控，事件触发的位置信息包含在touches属性中。 如果再给body绑定一个点击事件，触摸事件和点击事件都是会触发的。 基本触摸事件如下： var bodyDom = document.querySelector('body'); bodyDom.ont
移动端触屏事件
SunsetGirl的博客
05-25 171
触屏事件 一、兼容DOM的触摸事件 1.touchstart 当手指触摸屏幕时触发 2.touchmove 当手指在屏幕上滑动时连续触发 3.touchend 当手指从屏幕上移开时触发 4.touchcancel 当系统停止跟踪触摸时触发 二、每个触摸事件包含的三个触摸列表 1.touches 当前跟踪的触摸操作的Touch对象的数组 2.targetTouches 特定于时间目标的Touch对象的数组 3.chargeTouches 自上次触摸以来发生哪些改变的Touch对象的数组 4
JS学习第7天——移动端特效（触屏事件touch、classList属性、轮播图、click延时解决方案、常用开发插件和开发框架）
背心的博客
03-05 1345
移动端特效（触屏事件touch、classList属性、轮播图、click延时解决方案、常用开发插件和开发框架）
JS中的触摸事件
书香水墨
04-21 1万+
触摸事件与鼠标事件相比有两个不同点： 1)鼠标光标只有一个，而触摸点可能有很多； 2)鼠标光标可以悬停，而触摸点则不行。 1 给元素赋值触摸事件 事件类型 是否可以取消 是否走完整个冒泡式出发过程 描述 浏览器对该事件的默认处理方式 touchstart 是 是 用户将某个触摸点置于触摸界面之上 未定义 touchmove 是 是 用户在触摸界面上移动触摸点 未定义 t...
[js点滴]JavaScript之触摸事件07
图解AI
11-13 5361
触摸事件触摸API由三个对象组成。 Touch TouchList TouchEvent Touch对象表示触摸点（一根手指或者一根触摸笔），用来描述触摸动作，包括位置、大小、形状、压力、目标元素等属性。有时，触摸动作由多个触摸点（多根手指或者多根触摸笔）组成，多个触摸点的集合由TouchList对象表示。TouchEvent对象代表由触摸引发的事件，只有触摸屏才会引发这一类事件。很多时
移动端JS屏幕触摸事件Touch
邪小新的博客
04-02 1万+
随着移动互联的到来, 人们使用移动设备浏览网页的频率高了，我们平时在pc浏览器上用的事件，比如：click, mouseover等， 已经无法满足移动设备触摸屏的特点。 touch是移动端的触摸事件 而且是一组事件。 加粗样式 如何使用touch, 1.绑定事件：element.addEventListener(‘touchstart’,function () { }); 2.事件对象： Touc...
vue自定义移动端touch事件之点击、滑动、长按事件
08-27
Vue自定义移动端Touch事件之点击、滑动、长按事件 在移动端开发中，Touch事件是非常重要的一部分，我们经常需要监听用户的触摸操作，如点击、滑动、长按等。Vue框架提供了多种方式来处理Touch事件，但是在实际开发...
浅谈移动端之js touch事件 手势滑动事件
10-21
主要和大家聊一聊移动端之js touch事件，即手指的滑动事件,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS移动端拖拽touch
10-24
总的来说，JS移动端拖拽touch涉及到的技术主要包括JavaScript Touch事件的监听与处理、元素位置的动态更新、边界检测以及可能的动画效果。理解和掌握这些技术，对于构建具有优秀用户体验的移动端应用至关重要。
百度 touch js 解决 移动端click点击事件
07-28
百度touch.js是一个轻量级的JavaScript库，专为了解决移动端Web应用中的点击事件延迟问题。它通过监听`touchstart`、`touchmove`、`touchend`等触摸事件，当检测到用户不是在进行滚动操作时，会立即触发一个模拟的`...
javascript——touch事件介绍与实例演示
front_end_fan
08-22 718
前言  诸如智能手机和平板电脑一类的移动设备通常会有一（capacitive touch-sensitivescreen），以捕捉用户的手指所做的交互。随着移动网络的发展，其能够支持越来越复杂的应用，web开发者需要一种方法来处理这些事件。例如，几乎所有的快节奏游戏都需要玩家一次按下多个按钮，这种方式，在触摸屏情况下，意味着多点触摸。      Apple在iOS 2.0中引入了触摸事件API，An
移动互联网终端的touch事件,touchstart, touchend, touchmove
leiyongping的专栏
12-15 598
前言 如果我们允许用户在页面上用类似桌面浏览器鼠标手势的方式来控制WEB APP，这个页面上肯定是有很多可点击区域的，如果用户触摸到了那些可点击区域怎么办呢?? 诸如智能手机和平板电脑一类的移动设备通常会有一个电容式触摸屏（capacitive touch-sensitive screen），以捕捉用户的手指所做的交互。随着移动网络的发展，其能够支持越来越复杂的应用，web开发者需要一种方法...
[js点击]JavaScript之原生触摸事件详解01
图解AI
11-20 1万+
AJAX 浏览器与服务器之间，采用HTTP协议通信。用户在浏览器地址栏键入一个网址，或者通过网页表单向服务器提交内容，这时浏览器就会向服务器发出HTTP请求。1999年，微软公司发布IE浏览器5.0版，第一次引入新功能：允许JavaScript脚本向服务器发起HTTP请求。这个功能当时并没有引起注意，直到2004年Gmail发布和2005年Google Map发布，才引起广泛重视。2005年2月，A
HTML5触摸事件（多点、单点触控）
热门推荐
shooke笔记
03-25 1万+
本文转自：http://www.360us.net/article/9.html HTML5的触摸API支持处理单点和多点的触摸事件处理。 接口 1、TouchEvent：代表了一个触摸事件。 主要属性： TouchEvent.changedTouches：一个TouchList对象。代表了所有上一个接触点到当前点状态发生变化的点。 TouchEvent.tou
【JS教程】移动端 Touch（触摸）事件
我的博客
07-29 8074
最基本的touch事件包括4个事件： 1. touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。 2. touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。 3. touchend事件：当手指从屏幕上离开的时候触发。 4. touchcancel事件：当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的touch操作，即触发touchcancel。...
Javascript移动端触屏滑动事件详解
最新发布
tianxianghuiwei的博客
11-11 1843
同样首先阻止页面的滚屏行为，touchmove触发后，会生成一个event对象，在event对象中获取touches触屏列表，取得第一个touch,并记下pageX,pageY的坐标，算出差值，得出手指滑动的偏移量，使当前DOM元素滑动。触发touchstart事件后，会产生一个event对象，event对象里包括触摸列表，获得屏幕上的第一个touch,并记下其pageX,pageY的坐标。changedTouches: //涉及当前事件的手指的列表，尽量使用这个代替touches。
JavaScript移动端的手指触摸touch事件
weixin_48602044的博客
07-07 1963
JavaScript移动端的手指触摸touch事件
实现移动端touch事件的横向滑动列表效果
05-14
实现移动端touch事件的横向滑动列表效果可以使用原生的JavaScript和CSS3来实现。 首先，我们需要在HTML中创建一个容器元素，用来包含列表项。容器元素需要设置overflow-x属性为scroll，使得内容超出容器范围时可以滚动。 ```html <div class="container"> <ul class="list"> <li>项1</li> <li>项2</li> <li>项3</li> <li>项4</li> <li>项5</li> </ul> </div> ``` 然后，在CSS中，我们需要设置容器元素和列表项的样式，以及使用CSS3的transition属性来实现平滑的过渡效果。 ```css .container { width: 100%; overflow-x: scroll; -webkit-overflow-scrolling: touch; /* 添加iOS滚动效果 */ } .list { display: flex; flex-wrap: nowrap; /* 设置列表项不换行 */ transition: transform 0.3s ease; /* 添加平滑的过渡效果 */ } .list li { width: 100px; height: 100px; margin-right: 10px; background-color: #ccc; } ``` 最后，在JavaScript中，我们需要监听容器元素的touchstart、touchmove和touchend事件，计算滑动距离并通过改变列表项的transform属性来实现横向滑动效果。 ```javascript const container = document.querySelector('.container'); const list = document.querySelector('.list'); let isDragging = false; let startPosition = 0; let currentTranslate = 0; let prevTranslate = 0; let animationId = 0; container.addEventListener('touchstart', touchStart); container.addEventListener('touchmove', touchMove); container.addEventListener('touchend', touchEnd); container.addEventListener('touchcancel', touchEnd); function touchStart(event) { if (event.target.classList.contains('list')) { isDragging = true; startPosition = event.touches[0].clientX; animationId = requestAnimationFrame(updateAnimation); container.classList.add('grabbing'); } } function touchMove(event) { if (isDragging) { const currentPosition = event.touches[0].clientX; currentTranslate = prevTranslate + currentPosition - startPosition; } } function touchEnd() { isDragging = false; cancelAnimationFrame(animationId); prevTranslate = currentTranslate; container.classList.remove('grabbing'); } function updateAnimation() { list.style.transform = `translateX(${currentTranslate}px)`; animationId = requestAnimationFrame(updateAnimation); } ``` 通过以上代码，我们就成功地实现了移动端touch事件的横向滑动列表效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值