移动web js触屏事件

川长思鸟来 2022-05-15 03:54 213阅读 0赞

移动web js触屏事件 按下 松开 滑动讲解

### 一、触摸事件 ###

ontouchstart

ontouchmove

ontouchend

ontouchcancel

目前移动端浏览器均支持这4个触摸事件，包括IE。由于触屏也支持MouseEvent，因此他们的顺序是需要注意的：

touchstart → mouseover → mousemove → mousedown → mouseup → click1

/\*\*\* onTouchEvent\*/

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <p>11</p> <p>12</p> <p>13</p> <p>14</p> <p>15</p> <p>16</p> <p>17</p> <p>18</p> <p>19</p> </td> 
   <td> <p><code>var&nbsp;div&nbsp;=&nbsp;document.getElementById("div");</code></p> <p><code>//touchstart类似mousedown</code></p> <p><code>div.ontouchstart&nbsp;=&nbsp;function(e){ </code></p> <p><code>//事件的touches属性是一个数组，其中一个元素代表同一时刻的一个触控点，从而可以通过touches获取多点触控的每个触控点</code></p> <p><code>//由于我们只有一点触控，所以直接指向[0]</code></p> <p><code>var&nbsp;touch&nbsp;=&nbsp;e.touches[0];</code></p> <p><code>//获取当前触控点的坐标，等同于MouseEvent事件的clientX/clientY</code></p> <p><code>var&nbsp;x&nbsp;=&nbsp;touch.clientX;</code></p> <p><code>var&nbsp;y&nbsp;=&nbsp;touch.clientY;</code></p> <p><code>};</code></p> <p><code>//touchmove类似mousemove</code></p> <p><code>div.ontouchmove&nbsp;=&nbsp;function(e){ </code></p> <p><code>//可为touchstart、touchmove事件加上preventDefault从而阻止触摸时浏览器的缩放、滚动条滚动等</code></p> <p><code>e.preventDefault();</code></p> <p><code>};</code></p> <p><code>//touchend类似mouseup</code></p> <p><code>div.ontouchup&nbsp;=&nbsp;function(e){ </code></p> <p><code>//nothing&nbsp;to&nbsp;do</code></p> <p><code>};</code></p> </td> 
  </tr> 
 </tbody> 
</table>

发表评论取消回复

表情：

评论列表（有 0 条评论，213人围观）

还没有评论，来说两句吧...

相关阅读

相关移动端App自动化之触屏操作自动化

![7dcaff8630534f64a114dcd2825f32d2.png][] 工作中我们经常需要对应用的页面进行手势操作，比如滑动、长按、拖动等，AppiumDrive

女爷i/ 2024年03月02日 08:33/ 0 赞/ 12 阅读

相关 WebAPIs-06：动画函数封装 + 触屏事件

1.1. 动画函数封装 1.1.1 缓动效果原理缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来思路： 1. 让盒子每次移动的距离慢慢变小，

￡神魔★判官ぃ/ 2022年12月16日 09:28/ 0 赞/ 129 阅读

相关 html 手机端拖拽效果,JS实现移动端触屏拖拽功能

1.html 2.css \ \{ margin: 0; padding: 0; \} html, body \{ width: 100%; height:

谁借莪１个温暖的怀抱￠/ 2022年10月06日 11:49/ 0 赞/ 333 阅读

相关移动Web滑屏框架分享

月26号参加 [webrebuild][]深圳站，会上听了彪叔的对初心的讲解，“工匠精神”这个词又一次被提出，也再次引起了我对它的思考。专注一个项目并把它做得好，很好，更好..

梦里梦外;/ 2022年08月07日 08:36/ 0 赞/ 139 阅读

相关移动web js触屏事件

移动web js触屏事件按下松开滑动讲解一、触摸事件 ontouchstart ontouchmove ontouchend ontouchcancel

川长思鸟来/ 2022年05月15日 03:54/ 0 赞/ 214 阅读

相关 Unreal Engine 4：如何处理触屏事件

目录一、处理屏幕点击事件二、处理屏幕双击事件三、处理屏幕长按事件四、获取touch在World中的点击位置 --------------------

忘是亡心i/ 2022年04月05日 05:11/ 0 赞/ 864 阅读

相关手机触屏事件（jquery）

> 在移动端，点击事件和悬停事件都同统一为点击事件，所以对于手机或者带有触屏的电子设备来说，触屏事件不可忽视，当然，在不可触摸的屏幕上，这写事件就没有作用了。触摸开始

忘是亡心i/ 2022年03月15日 08:26/ 0 赞/ 295 阅读

相关移动端监控用户触屏

最近有个需求要用js监控移动端的用户触屏操作，就查了一下，常用的有三个函数，这里记录一下其中还有一些参数需要提前了解一下 touches: //当前屏幕

墨蓝/ 2022年02月18日 15:17/ 0 赞/ 274 阅读

相关自定义初学3——实现触屏事件

在上一篇中，我们注意到自定义View中有个onTouchEvent（）方法，看名字就知道是干什么的了。通常我们处理触屏事件会用TouchListener和Event Handl

浅浅的花香味﹌/ 2021年09月22日 04:52/ 0 赞/ 241 阅读

相关 unity中触屏控制人物移动

例如在飞机大战中，让战机随手指移动而移动 public class Hero : MonoBehaviour { priv

╰半橙微兮°/ 2021年09月16日 05:46/ 0 赞/ 431 阅读