js手机端触摸事件 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

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

导绪移动端浏览器兼容性较好，不需要考虑JS的兼容性问题，可以放心的使用原生JS书写效果，但是移动端也有自己独特的地方。如触屏事件touch (也称触摸事件) ， Android和IOS都有。...1.触摸事件触屏touch事件说明touchstart手指触摸到一个DOM元素时触发touchmove手指在一个DOM元素上滑动时触发touchend手指从一个DOM元素上移开时触发...('我继续摸'); }) // 手指触摸离开DOM事件 div.addEventListener('touchend', function () {...console.log('我摸够了'); }) 2.触屏事件TouchEvent是一类描述手指在触摸平面 (触摸屏、触摸板等)的状态变化的事件。...因为平时我们都是给元素注册触摸事件,所以常用targetTocuhes3.TouchEvent触摸事件对象touches 正在触摸屏幕的所有于指的列衣，targetTouches 正在触摸当前DOM元素的手指列表如果侦听的是一个

2.4K0 0

JS手机端touch事件计算滑动距离的方法

计算手势在手机屏幕上滑动时，手势滑动的距离，代码如下： function wetherScroll(){ var startX = startY = endX =endY =0; var body=...distanceY=endY - startY; // console.log(“distanceX:”+distanceX+","+“distanceY:”+distanceY); //移动端设备的屏幕宽度

9.2K2 0

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

是的

没有找到

js判断手机端和pc端

Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){ window.location.href="手机页面...window.location.href="平板页面"; }else{ window.location.href="其他移动端页面...---识别手机或电脑的js开始---> (function(){ var res = GetRequest(); var...=-1){return true;} }; //将下面的http://abc.com改成你的wap手机版页面地址如我的 http://abc.com var toMobileVertion...---识别手机或电脑的js结束--->

10.9K6 1

WPF 从触摸消息转触摸事件

在 WPF 程序可能因为一些坑让程序触摸失效，如果此时还可以收到系统的触摸消息，那么可以通过从触摸消息转触摸事件解决程序触摸失效但不适合所有触摸失效程序在 WPF 的触摸代码写的不是很清真，特别是触摸到事件可能出现一些坑...因为在希沃的设备上主要是触摸屏幕，用户不会有鼠标，如果出现了初始化的过程刚好就是 USB 准备好，那么这个程序将收不到任何触摸事件在程序启动的时候，可以通过获得触摸精度和触摸点判断当前是否存在触摸设备...Window 的 SourceInitialized 事件触发之后才能调用创建 MessageTouchDevice 继承 TouchDevice 从 WPF 模拟触摸设备可以知道这个类可以用来模拟触摸...inputs, NativeMethods.TouchInputSize); 如果可以拿到输入，那么 GetTouchInputInfo 将会返回 true 通过这个判断然后遍历 inputs 输入进行转换事件...，从 WPF 模拟触摸设备找到通过封装的 Down 等方法可以转换为事件，请看代码在 GetTouchInputInfo 方法拿到的输入的类包含了当前触摸的屏幕坐标和触摸的面积，拿到的数据其实是原有是的百分之一也就是需要除以

2.1K2 0

移动端模拟手机联系人触摸A~Z导航

HTML5学堂：今天要与大家分享一个当前移动端很常见的效果，类似于手机联系人的快速导航功能，即当触摸a~z的字母时，能够相对应的显示文字。...有些手机的音乐导航也类似，具体可详见下图： touchmove的问题在移动端，我们可以使用touch事件进行处理，此处首先想到的是使用touchmove事件。...实现触摸a~z导航（模拟手机联系人）当前能够想到的实现方法有两种（也均测试无误）第一种方法：手指滑动的时候，判断手指滑动的竖向位置，如果到达相应标签的位置(由于标签是fixed定位模式，因此可以拿到每个标签...使用elementFromPoint实现兼容 js.../zepto.js"> var con = document.getElementById('con'); var list

2.1K5 0

WPF 触摸到事件

本文从代码底层告诉大家，在触摸屏幕之后是如何拿到触摸点并且转换为事件在 WPF 界面框架核心就是交互和渲染，触摸是交互的一部分。...从触摸线程转换到主线程，然后从主线程封装为路由事件的模块请看下面 ? 路由事件需要封装触摸消息并且找到命中的元素 ?...} 通过这个方法可以知道触摸的设备的 id 和触摸的数据，触摸的事件在拿到触摸信息之后，会调用 FireEvent 转换事件，在拿到的信息包括了表示是什么事件，因为触摸的事件是传入一个数值，需要通过这个数值转换为对应的事件...在触摸的过程会调用 StylusPlugIn 是 WPF 提供的快速拿到触摸的方法，如果是从路由事件，需要等待主线程和其他的代码，这样无法做到比较快拿到触摸。...，从上面代码可以说明 StylusPlugIn 的执行是比路由事件快，所以要做到比较快的触摸就需要使用这个方法 ?

2K2 0

js移动端中touch事件

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

11.3K2 0

CreatorPrimer|触摸事件冒泡

从一次微信聊天开始 ---- 前两天正在愁公众号写点什么，打开微信看到uikiller用户「悦雨」遇到了一个问题：地图拖动与子节点触摸事件产生冲突，表现为：在子节点上拖动，但地图不动，怎么办？...触摸事件捕获！继续对话： ? 至此问题终于解决，下来的公众号内容也有了着落 ? ！..._touchMoved=true 再看1006行onTouchEnd函数，在这里判断了touchMoved这个变量，停止TOUCH_END事件的传播，这样子节点的触摸事件就不会被触发了 993行onTouchMoved...在CCScrollView.js源码中搜“TOUCH_END”关键字，找到TOUCH事件注册的代码： ? 看看这里有与自己平时注册TOUCH事件有什么不同？..., //触摸事件类型 this.

1.9K3 0

Android触摸事件机制

每天我们对着手机重复的做着点击、滑动操作，而手机则随着我们的操作给我们展示她的精彩。 … 废话到此结束。看到这里，即使不是作为移动端码农的你也应该知道触摸事件对手机（经典键盘机除外）的重要性了。...什么是触摸事件顾名思义，就是触摸手机屏幕后产生的事件。这时候请你拿出手机，点击屏幕中的某个按钮（不要松手），移动一段距离，松手。...这个过程一般会产生如下几个事件：点击（Down）事件移动（Move）事件松手（Up）事件 Android为我们封装好了一个触摸事件类MotionEvent,上述的三个过程分别对应着MotionEvent...分析可知：触摸事件ev类收到点击的ACTION，会回调onUserInteraction方法，一般项目中我们把一些需要用户开始触摸时就需要执行的任务代码放在这里。...从中我们看出触摸事件ev会按照子View加入ViewGroup先后顺序相反的顺序，依次有机会去消费此触摸事件ev，即最后加入的最先有机会消费此触摸事件（消费的前提是，触摸点在这个子View的视图范围之内

1.4K3 0

Flutter触摸事件原理

Flutter 触摸事件的处理点在 GestureBinding中。...在 GestureBinding 中存在一个 handlerPointerEvent方法，这个方法就是触摸事件在 Flutter 侧的触发点。...Flutter 会通过这个 test 去判断手势事件具体是交给谁处理。...总结最后总结一下，Flutter 触摸事件的处理分为两部分。利用hittets收集组件。分发事件，使用GestureArenaManager筛选事件的具体处理者。...到这里 Flutter 的触摸事件就清楚了，我们可以了解一些基本的事件处理机制，来解决开发中的一些疑惑。

2K2 0

Cocos Creator 触摸事件穿透

触摸事件假设给整个Canvas添加了事件监听。用网页模拟时，鼠标移动，点击子node都会监听到。 start() { this.

2.2K3 0

为精灵添加触摸事件

比如：精灵是一块石头，触摸石头后，让石头从A点移动到B点。　　由于精灵（CCSprite)类没有点击、触摸事件，所以要用其他的方法为精灵添加触摸事件。　　...返回false表示忽略 //也可在此方法中判断是否要为某些其它元素适时忽略触摸事件 bool HelloWorld::ccTouchBegan(CCTouch *pTouch, CCEvent *pEvent...）事件了，但是，我们如果在场景中存在其他的比如菜单、按钮之类的元素，会发现这些元素触摸（点击）无响应了。...没错，我们只判断了当触摸范围在指定精灵上时，才触发动作。　　...->addTargetedDelegate(this,-120,true); 　　其中第二个参数为响应等级，数越小，等级越高，所以我们只要为其它的元素指定比-120小的整数，其它元素就会优先响应自身的触摸事件

1.3K3 0

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

cc.eventManager.addListener({ event: cc.EventListener.TOUCH_ALL_AT_O...

5.8K3 0

Android触摸事件传递（上）

前言：智能手机早已成为我们今天身边必不可少的手持设备，iOS和Android也是目前主流的二大移动操作系统，当然也有越来越多的开发者加入到移动开发的工作中来。...App来说至关重要，人机交互从我们手指的各种触摸手势开始，手机屏幕检测到我们的触摸事件，手机操作系统会将这些触摸事件通过回调框架提供的定义好的接口，让我们App可以接收到这些触摸事件，从而开展我们自己的业务逻辑...这里分三步，第一步，如果是触摸开始类型ACTION_DOWN事件，会回调onUserInteraction()方法，所以在项目中可以考虑将一些需要用户开始触摸时就执行的代码放到此方法中；第二步，将触摸事件...都不会再收到点击的触摸事件了。...这也验证了我们关于View触摸事件传递的第二部分，触摸事件ev优先被onTouchListener消费，然后再让传递给onTouchEvent消费。

1.8K3 0

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

前端的很多事件在PC端和浏览器端可公用，但有些事件却只在移动端产生，如触摸相关的事件本文整理了移动端常见的一些事件，包括原生支持的click、touch、tap、swipe事件，也有定义型的gesture...手势事件（目前只是一个概念，使用的时候需封装模拟）使用到的是移动端的Chrome浏览器，本文只对该浏览器进行调试，其他浏览器暂未考虑到一、事件定义及分类 1. click事件单击事件，类似于PC端的...click，但在移动端中，连续click的触发有200ms ~ 300ms的延迟 2. touch类事件触摸事件，有touchstart touchmove touchend touchcancel...2) 改用zepto.js正常 js"> ? 看第五次的touch ? 看第二次的touch ? 看第四次的touch ?...由此可知: touches记录的是屏幕上全部的触摸对象的信息 targetTouches记录的是当前DOM节点上全部的触摸对象的信息 changedTouches记录着触发该次事件的信息，一般长度为1

3.5K2 0

Android触摸事件传递（下）

ViewGroup触摸事件的传递，我们要先了解onInterceptTouchEvent()方法，这个方法默认返回false，表示ViewGroup是否拦截触摸事件，即如果返回true，拦截触摸事件，则不会将任何触摸事件...很明显，我们的按钮的触摸事件和它的父容器的触摸事件，都触发了，这是因为，我们EventBtn的onTouchListener方法和onTouchEvent方法都返回false，没有消费触摸事件，事件会向上继续传递...触摸事件ev会按照子View加入ViewGroup先后顺序相反的顺序，依次有机会去消费此触摸事件ev，即最后加入的最先有机会消费此触摸事件，当然，它消费的前提是，触摸点的坐标在这个子View的frame...我们也很好读懂，如果事件是ACTION_UP或者ACTION_CANCEL，表示触摸结束，但是还有第三种是如果触摸事件是ACTION_DOWN 并且result==false，同样停止嵌套的触摸事件传递...通过上面的知识，如果我们不希望响应触摸事件，可以给ACTION_DOWN触摸事件，返回false，或者如果我们希望提前结束一个触摸事件周期，可以给targetView 发送 ACTION_CANCEL事件

1.7K1 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 事件不是原生的，所以是封装的...document.getElementById('btn'); tap(btn, function() { alert('taped'); }); 拓展：点透问题如果我们在移动端所有的...，所以，触发了下面的 a 的 click 事件，注意：我们认为 a 标签默认是绑定了 click 事件的。

8.6K4 0

Android触摸事件实现笔触画布

任何View都有触摸事件,经常在自定义控件时重写setOnTouchListener 本篇通过手绘图片来讲述这个知识点本篇分为三个等级：一览图：直线曲线笔触 LEVEL1.png LEVEL2....png LEVER3.png ---- LEVEL1:基础实现在Activity中通过一个全屏的Bitmap创建的Canvas绘制为ImageView添加触摸事件监听。...mPaint.setStrokeWidth(10); mPaint.setColor(Color.RED); //将bitmap用ImageView展示 mIdIvShow.setImageBitmap(bitmap); 3.监听事件

1.5K3 0

IOS触摸事件分发机制详解

前言很多时候大家都不关心IOS触摸事件的分发机制的实现原理，当遇到以下几种情形的时候你很可能抓破头皮都找不到解决方案: 某个点击消息由父视图来处理，子视图怎么把消息传递给父视图这个按钮不灵敏，怎么扩大点击响应区域...通过控制Hit-test view 、人为干预响应者能否对这一事件作出响应最终来控制触摸事件的分发机制。...UIEvent UIEvent包含最常见的三种事件：Touch Events(触摸事件)、Motion Events(运动事件，比如重力感应和摇一摇等)、Remote Events(远程事件，比如用耳机上得按键来控制手机...UIResponder UIResponder 类提供了一组接口专门用来响应用户的操作，处理各种事件，其中包括触摸事件(Touch Events)、运动事件(Motion Events)、远程控制事件(...响应链能为一下几种事件进行消息转发，但不仅限于一下几类事件类型：触摸事件(Touch Events) 运动事件(Motion Events) 远程控制事件(Remote Control Events)

4.5K9 0

手机端和PC端分别加载不同的js文件

手机端和PC端分别加载不同的js客服代码（注意：是要在PC和手机端分别加载不同的js文件）第一种方法（简单型）： // 根据屏幕尺寸...">'); } 第二种方法（已测试通过，项目真实在用）：这样子我们直接在PC端和手机端分别输出不同的js。...所以，我们在手机端和PC端分别加载不同的js的需求完美解决了。 ...bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) { // alert("手机浏览.../pc.js",function(){ //加载pc.js,成功后，并执行回调函数 console.log("加载js文件"); }); }

5.1K5 1

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭