js移动端触摸事件完整代码 - 腾讯云开发者社区

文章/答案/技术大牛

发布

【如果你要学JS XIV】—— 移动端常用事件-移动端touch触摸事件

导绪移动端浏览器兼容性较好，不需要考虑JS的兼容性问题，可以放心的使用原生JS书写效果，但是移动端也有自己独特的地方。如触屏事件touch (也称触摸事件) ， Android和IOS都有。...console.log('我摸够了'); }) 2.触屏事件TouchEvent是一类描述手指在触摸平面 (触摸屏、触摸板等)的状态变化的事件。...这类事件用于描述一个或多个触点,使开发者可以检测触点的移动,触点的加和减少,等等 touchstart、touchmove、 touchend 三个事件都会各自有事件对象。...因为平时我们都是给元素注册触摸事件,所以常用targetTocuhes3.TouchEvent触摸事件对象touches 正在触摸屏幕的所有于指的列衣，targetTouches 正在触摸当前DOM元素的手指列表如果侦听的是一个...，然后用盒子原来的位置+手指移动的距离4.手指移动的距离 = 手指滑动中的位置 - 手指刚开始触摸的位置<!

2.3K0 0

js移动端中touch事件

触摸事件是在移动设备(如智能手机或平板电脑)上查看页面时触发的事件。它们允许您跟踪多点触摸事件。...我们有4个触摸事件: touchstart 触摸事件已经启动(触摸表面) touchend 一个触摸事件已经结束(表面不再被触摸) touchmove 触摸移动手指(或任何接触设备的东西)在表面移动 touchcancel...触摸事件已被取消每当一个触摸事件发生，会触发一个触摸事件: const link = document.getElementById('my-link') link.addEventListener...('touchstart', event => { // touch event started }) 以下是我们可以访问该事件的所有属性: identifier 标识符此特定事件的唯一标识符。...用于跟踪多点触摸事件。相同的手指=相同的标识符。

11.2K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

coco2d-js 触摸移动的同时处理点击事件

getLocation().y); } }, this); 如果把onTouchesMovied和onTouchesEnded放到不同的类中监听，则可以实现移动和点击不互相影响

5.7K3 0

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

前端的很多事件在PC端和浏览器端可公用，但有些事件却只在移动端产生，如触摸相关的事件本文整理了移动端常见的一些事件，包括原生支持的click、touch、tap、swipe事件，也有定义型的gesture...手势事件（目前只是一个概念，使用的时候需封装模拟）使用到的是移动端的Chrome浏览器，本文只对该浏览器进行调试，其他浏览器暂未考虑到一、事件定义及分类 1. click事件单击事件，类似于PC端的...click，但在移动端中，连续click的触发有200ms ~ 300ms的延迟 2. touch类事件触摸事件，有touchstart touchmove touchend touchcancel...四种之分 touchstart：手指触摸到屏幕会触发 touchmove：当手指在屏幕上移动时，会触发 touchend：当手指离开屏幕时，会触发 touchcancel：可由系统进行的触发，比如手指触摸屏幕的时候...2) 查看触发的事件对象简单地修改，将事件监听中第三个参数置为true，输出完整的事件对象 addEvent(one, 'tap click touchstart touchmove touchend

3.5K2 0

JS篇(028)-移动端 click 事件、touch 事件、tap 事件的区别

参考答案： 1.click 事件在移动端会有 200-300ms 的延迟，主要原因是苹果手机在设计时，考虑到用户在浏览网页时需要放大，所以，在用户点击的 200-300ms 之后，才触发 click，...2.touch 事件是针对触屏手机上的触摸事件。现今大多数触屏手机 webkit 内核提供了 touch 事件的监听，让开发者可以获取用户触摸屏幕时的一些信息。...mouseover mouseup 的触发 3.tap 事件在移动端，代替 click 作为点击事件，tap 事件被很多框架（如 zepto）封装，来减少这延迟问题， tap 事件不是原生的，所以是封装的...，如果移动，则不触发tap事件 isMove = false; // 在touchstart时记录开始的时间 ele.addEventListener('touchstart...document.getElementById('btn'); tap(btn, function() { alert('taped'); }); 拓展：点透问题如果我们在移动端所有的

8.6K4 0

Unity 移动端触摸屏操作

Moved 手指在屏幕上移动 Stationary 手指触摸屏幕，但自最后一阵没有移动 Ended 手指离开屏幕 Canceled 系统取消触控跟踪...，原因如把设备放在脸上或同时超过5个触摸点下面通过一段代码来进行移动设备触摸操作的实现： using UnityEngine; using System.Collections; public...deltaDis1.x)+Mathf.Abs(deltaDis1.y+deltaDis2.y))); } } } } 将这个脚本绑定在主摄像机上，发现单触摸操作可上下左右移动摄像机...，双触摸操作可以缩放。...导出Android 在手机上运行，可以发现触摸起了效果。

4.1K2 0

移动端事件详解

关于移动端事件的一些笔记移动端事件类型 touchstart事件 touchmove事件 touchend事件移动端事件对象 touches 屏幕上有几个触点 targetTouches...绑定事件的元素上有几个触点 changedTouches 在屏幕上改变(位置移动离开进入 )的触点的个数(如果手指离开屏幕只有changedTouched有值其他都没有) 获取触点坐标 clientX...，我们把PC端的网页放到了移动端，苹果公司把PC端的网页进行了缩放，发明了一种浏览缩放网页的处理方案，就是双击放大，第一次点击会延迟300ms左右，然后判断，如果有第二次点击，就是放大，如果没有，就是点击...console.time(“timer”)计时器开 console.timeEnd(‘timer’)计时器关解决方法：写上 viewport 设置就可以了用fastClick 移动端判断手指滑动方向...如果终止点坐标减去起始点坐标大于0 那么是向右否则是向左滑如果竖直坐标的差值的绝对值大于水平就是竖直滑动如果终止点坐标减去起始点坐标大于0 那么是向下否则是向上滑代码如下

1.6K2 0

05移动端事件

一、移动端三大事件 1、手指按下 ontouchstart 2、手指触摸 ontouchmove 3、手指抬起 ontouchend...('touchstart', function(){}); 二、PC端事件在移动端（出现的问题） 1、PC端事件在移动端略慢，大概300ms左右 2、阻止PC事件 document.addEventListener...('touchstart', function(ev){ ev.preventDefault(); }); 作用与问题： 1、移动端的点透问题：当上层元素发生点击时...input 框不能触焦问题） txt.addEventListenr('touchstart', function(ev){ ev.stopPropagation(); }); 三、移动端事件对象...：位于当前 DOM 元素上（当前dom元素之外的无法获取）的手指的列表 3、changedTouches：涉及当前事件的手指的一个列表例子：移动端无缝轮播切换

2K5 0

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

在前端的移动Web开发中，有一部分事件只在移动端产生，如触摸相关的事件。接下来给大家简单总结一下移动端的事件。 1....移动端特有的touch事件由于移动端设备大都具备触摸功能，所以移动端浏览器都引入了触摸(touch)事件。...2.1 touch事件与click事件同时触发在很多情况下，触摸事件和鼠标事件会同时被触发（目的是让没有对触摸设备优化的代码仍然可以在触摸设备上正常工作）。...它非常小，非常适合移动端。 Zepto.js的touch模块中封装了手势相关的代码。...---- 参考文章：移动端web开发---Touch事件详解 MDN:TouchEvent 移动端前端常见的触摸相关事件touch、tap、swipe等整理

9.1K8 0

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

8.3K7 0

【移动端】touch事件及穿透事件

苹果的解决方案：方案一：双指进行缩放方案二：在屏幕上双击进行放大（单击300ms后，再单击才算双击），造成了，移动端点击事件，300ms 延迟的问题解决方案，就是使用touch事件来替代移动端新增...touch事件 --- 只能使用现代事件进行添加 touchstart: 触摸开始 touchmove: 触摸移动 touchend: 触摸结束 touchcancel：touch 取消，如来电等...【扩展】：移动端touch、click、tap的区别 http://t.zoukankan.com/luo1240465012-p-9450627.html 添加touch 事件代码如下：触摸的元素，e.target都是开始时触摸的元素dom....e.preventDefault(); 方法二：吃掉touch之后的click, 使用计时器，让touch后延迟350ms再隐藏蒙层方法三：使用fastclick.js；可以直接写click事件

2.9K1 0

移动端触屏事件

触屏事件概述移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。...比如触屏事件 touch（也称触摸事件），Android和 IOS 都有。 touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。...触摸事件对象（TouchEvent） TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。...触摸事件对象重点我们看三个常见对象列表： ?...和 pageY 移动端拖动的原理：手指移动中，计算出手指移动的距离。

4.1K3 0

移动端一个奇怪的触摸bug

这两天遇到一个很奇怪的bug，在移动端，一个页面里所有的input框都不能点击，我查了一下，里面的没有设置readonly属性，只要页面滚动一下就可以用了，而且，只要我在真机测试的时候，f12开发者模式下...结果定位到了这么一段我很不熟悉的代码片段 /* -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -moz-tap-highlight-color

1.1K3 0

pc端与移动端的事件总结

test3" >3 4 window.onload=function(){ //电脑端测试一二...document.onmousemove=null; document.onmousedown=null; document.onmouseup=null; } } //移动端测试一二

2.2K5 0

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

区别有： PC 端一个电脑只能有一个鼠标，而移动端有多点触摸。...PC 端添加效果使用 mouseup、mousedown、mousemove，而移动端使用的 touchstart、touchmove、touchend 。...一、touch事件类型 touchstart - 手指触摸屏幕，在元素上按下时触发 touchmove - 手指移动，在元素上按下之后屏幕上任意移动 tounchend - 手指在元素上按下之后，屏幕任意位置抬起时触发...touch：事件只能在移动端使用，mouse ：事件只能在 PC 端使用。 touchstart：只能在绑定元素内按下触发，touchmove、touchend可以在屏幕的任意位置执行。...多点触发：多个手指同时触摸屏幕，进行旋转、缩放、放大、拖拽等操作。很多情况下，触摸事件跟鼠标事件会同时触发，目的是为了在pc端运行的时候，没有触摸设备可以使用鼠标代替。

1.7K3 0

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

1.8K3 0

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

4K2 0

js判断移动端和pc端

//判断是手机端还是pc端 function isPc(){ if(window.navigator.userAgent.match(/(phone|pad|pod...MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) { return true; // 移动端...}else{ return false; // PC端 } }

13.1K6 1

移动端的touch事件处理

在iPhone 3Gs发布的时候，其自带的移动Safari浏览器就提供了一些与触摸(touch)操作相关的新事件。随后，Android上的浏览器也实现了相同的事件。...关于这个事件的确切出发时间，文档中并没有具体说明，咱们只能去猜测了。触摸事件还包含下面三个用于跟踪触摸的属性 touches：表示当前跟踪的触摸操作的touch对象的数组。　　...参考文章：http://www.zhangyunling.com/235.html（touch事件简要的探讨一下移动端 touch 事件处理几个坑，以及相应的简单处理方法。...tap 事件的判定一个正确的 tap 事件应当满足一下条件：用户手指从屏幕移开时触发不能在用户移动手指时触发（防止和滚动、拖拽事件的冲突）多个手指同时触摸屏幕时不能触发不应该触发 click 事件具体实现代码可以参考...转载本站文章《移动端的touch事件处理》,请注明出处：https://www.zhoulujun.cn/html/webfront/SGML/html5/2017_0216_7950.html

3.2K2 0

第127天：移动端-获取触摸点的位置

一、移动端轮播图滑动 1、先获取手指在轮播图元素上的滑动方向(左右) （1）手指触摸开始时记录手指所在的坐标X （2）获取界面上的轮播图容器 var $carousels=$('.carousel')...; （3）注册滑动事件（4）变量重复赋值（5）结束触摸的一瞬间记录最后手指所在坐标X （6）比较开始和结束的坐标大小（7）控制精度获取每次手指滑动的距离，当距离大于一定值时，就认为有方向变化...next':'prev'); javascript代码 1 //移动端轮播图滑动 2 3 //1、先获取手指在轮播图元素上的滑动方向(左右) 4 //手指触摸开始时记录手指所在的坐标...next':'prev'); 40 41 42 43 } 二、移动端获取触摸点的方式说明 1.touchstart事件手指头触摸屏幕上的事件 2.touchmove...',function(){ //代码处理}); ?

2.3K2 0

点击加载更多

【如果你要学JS XIV】—— 移动端常用事件-移动端touch触摸事件

js移动端中touch事件

coco2d-js 触摸移动的同时处理点击事件

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

JS篇(028)-移动端 click 事件、touch 事件、tap 事件的区别

Unity 移动端触摸屏操作

移动端事件详解

05移动端事件

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

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

【移动端】touch事件及穿透事件

移动端触屏事件

移动端一个奇怪的触摸bug

pc端与移动端的事件总结

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

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

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

js判断移动端和pc端

移动端的touch事件处理

第127天：移动端-获取触摸点的位置

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐