开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js触摸事件怎么写

在JavaScript中处理触摸事件主要涉及到touchstart、touchmove和touchend这三个事件。以下是关于这些事件的基础概念、优势、类型、应用场景以及示例代码：

基础概念

touchstart：当一个或多个触摸点开始触摸屏幕时触发。
touchmove：当一个或多个触摸点在屏幕上移动时触发。
touchend：当一个或多个触摸点停止触摸屏幕时触发。

优势

响应迅速：触摸事件能够快速响应用户的触摸操作。
支持多点触控：可以同时处理多个触摸点的操作，适用于手势识别等场景。
跨平台：现代浏览器普遍支持触摸事件，适用于移动设备和桌面设备的交互。

类型

单点触控：只有一个触摸点。
多点触控：多个触摸点同时操作。

应用场景

滑动导航：在移动端网页中实现左右滑动切换页面或图片。
缩放功能：通过双指捏合或展开来实现图片或地图的缩放。
游戏控制：在游戏中通过触摸来控制角色的移动或动作。

示例代码

以下是一个简单的示例，展示如何使用触摸事件来实现一个可拖动的元素：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Touch Event Example</title>
<style>
  #draggable {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 100px;
    left: 100px;
  }
</style>
</head>
<body>

<div id="draggable"></div>

<script>
  const draggable = document.getElementById('draggable');
  let touchStartX = 0;
  let touchStartY = 0;
  let elementStartX = 0;
  let elementStartY = 0;

  draggable.addEventListener('touchstart', (event) => {
    event.preventDefault(); // 防止默认行为，如滚动
    const touch = event.touches[0];
    touchStartX = touch.clientX;
    touchStartY = touch.clientY;
    const rect = draggable.getBoundingClientRect();
    elementStartX = rect.left;
    elementStartY = rect.top;
  });

  draggable.addEventListener('touchmove', (event) => {
    event.preventDefault();
    const touch = event.touches[0];
    const deltaX = touch.clientX - touchStartX;
    const deltaY = touch.clientY - touchStartY;
    draggable.style.left = `${elementStartX + deltaX}px`;
    draggable.style.top = `${elementStartY + deltaY}px`;
  });

  draggable.addEventListener('touchend', (event) => {
    event.preventDefault();
    // 可以在这里添加触摸结束后的逻辑
  });
</script>

</body>
</html>

解决常见问题

触摸事件的默认行为：在触摸事件中使用event.preventDefault()来防止默认行为，如页面滚动。
多点触控的处理：可以通过event.touches数组来获取所有触摸点，并根据需要进行处理。
兼容性问题：确保在不同设备和浏览器上进行测试，处理可能的兼容性问题。

通过以上示例和解释，你可以更好地理解和使用JavaScript中的触摸事件来实现各种交互效果。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Android触摸事件_wpf触摸屏点击事件

触屏事件三类简单触屏事件：单击事件：OnClickListener 长按事件：OnLongClickListener 触摸事件：OnTouchListener 这些方法都是View类的，所以像TextView...View view)即可长按事件长按事件有单击事件的前四种方法，但是没有最后一种方法。...触摸事件触摸事件有onTouch方法有参数MotionEvent event，通过对象event方法getX()和getY()可以获取触摸出横纵坐标。...触摸事件第一下必须点在组件上，之后手指可以滑向组件之外，并且可以得到时时的坐标。简单地说，为一个飞机加上监听之后，我们必须手指放在飞机上才可以拖动飞机。...对最上面的TextView加上触摸监听器，并显示坐标。 xml代码： <?xml version="1.0" encoding="utf-8"?

2.1K2 0

touchesBegan 触摸事件

一、概念介绍 1、在用户使用App过程中，会产生各种各样的事件，iOS中的事件可以分为3大类型： 1）触摸事件 2）加速计事件 3）远程操控事件响应者对象UIResponder 在iOS...二、UIReponder类 UIResponder内部提供了一下方法来处理事件，父类是NSObject 1、触摸事件 1)手指按下事件 - (void)touchesBegan:(NSSet<UITouch...，单位是秒 @property(nonatomic,readonly) NSTimeInterval timestamp; 5）获取当前触摸事件所处的状态触摸事件在屏幕上有一个周期，即触摸开始、触摸点移动...类 UIEvent：成为事件对象，记录产生的时刻和类型，事件对象中包含于当前多点触摸序列相对应的所有触摸对象，还可以提供与特定视图或窗口相关联的触摸对象。...1、属性 1）获取事件类型 @property(nonatomic,readonly) UIEventType type; UIEventType枚举： UIEventTypeTouches 触摸事件

8322 0

WPF 从触摸消息转触摸事件

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

1.2K2 0

WPF 触摸到事件

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

1.3K2 0

CreatorPrimer|触摸事件冒泡

从一次微信聊天开始 ---- 前两天正在愁公众号写点什么，打开微信看到uikiller用户「悦雨」遇到了一个问题：地图拖动与子节点触摸事件产生冲突，表现为：在子节点上拖动，但地图不动，怎么办？...触摸事件捕获！继续对话： ? 至此问题终于解决，下来的公众号内容也有了着落 ? ！...从源码中学习 ---- 当知道ScrollView中拖动，不会触发子节点的事件，到此是不是就完了呢？有没想过，ScrollView它是怎么做的呢？...在CCScrollView.js源码中搜“TOUCH_END”关键字，找到TOUCH事件注册的代码： ? 看看这里有与自己平时注册TOUCH事件有什么不同？..., //触摸事件类型 this.

1.4K3 0

Android触摸事件机制

看到这里，即使不是作为移动端码农的你也应该知道触摸事件对手机（经典键盘机除外）的重要性了。什么是触摸事件顾名思义，就是触摸手机屏幕后产生的事件。...这个过程一般会产生如下几个事件：点击（Down）事件移动（Move）事件松手（Up）事件 Android为我们封装好了一个触摸事件类MotionEvent,上述的三个过程分别对应着MotionEvent...分析可知：触摸事件ev类收到点击的ACTION，会回调onUserInteraction方法，一般项目中我们把一些需要用户开始触摸时就需要执行的任务代码放在这里。...小场景，见真理场景一我们写一个最简单的demo如下 ? 运行程序，点击button，看到log输出如下： ?...从中我们看出触摸事件ev会按照子View加入ViewGroup先后顺序相反的顺序，依次有机会去消费此触摸事件ev，即最后加入的最先有机会消费此触摸事件（消费的前提是，触摸点在这个子View的视图范围之内

7283 0

Flutter触摸事件原理

Flutter 触摸事件的处理点在 GestureBinding中。...在 GestureBinding 中存在一个 handlerPointerEvent方法，这个方法就是触摸事件在 Flutter 侧的触发点。...当我们写多个 GestureDetector嵌套的时候，最上层的子节点会最先进入竞技场，所以这个时候只有上面的那个才会响应我们的点击事件。事件的 accept 和 reject 具体又做了什么呢？...总结最后总结一下，Flutter 触摸事件的处理分为两部分。利用hittets收集组件。分发事件，使用GestureArenaManager筛选事件的具体处理者。...到这里 Flutter 的触摸事件就清楚了，我们可以了解一些基本的事件处理机制，来解决开发中的一些疑惑。

1.4K2 0

触摸事件 touchstart、touchmove、touchend

目录触摸事件概述触摸事件编码触摸手指个数分析触摸目标 DOM 元素分析触摸位置分析 ---- 触摸事件概述 1、HTML5 中， PC 端基于鼠标的界面互动主要是单击，移动端界面交互方式主要是触摸...2、移动端浏览器触摸事件：事件名称描述是否包含 touches 数组 touchstart 触摸开始，多点触控，后面的手指同样会触发是 touchmove 接触点改变，滑动时是 touchend...触摸结束，手指离开屏幕时是 touchcancel 触摸被取消，当系统停止跟踪触摸的时候触发否 3、每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点（用来实现多点触控）：...3）changedTouches：涉及当前事件手指的列表。 4、每个 Touch 对象包含的属性如下： clientX：触摸目标在视口中的x坐标。...screenX：触摸目标在屏幕中的x坐标。 screenY：触摸目标在屏幕中的y坐标。 target：触摸的DOM节点目标。触摸事件编码 <!

1.7K2 0

为精灵添加触摸事件

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

5813 0

Cocos Creator 触摸事件穿透

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

1.7K3 0

Android触摸事件传递（上）

App来说至关重要，人机交互从我们手指的各种触摸手势开始，手机屏幕检测到我们的触摸事件，手机操作系统会将这些触摸事件通过回调框架提供的定义好的接口，让我们App可以接收到这些触摸事件，从而开展我们自己的业务逻辑...再次运行程序，点击按钮，没有打印日志，按钮也没有任何触摸响应。说明触摸事件此时被屏蔽了，为了弄清楚到底怎么回事，就要去看看Activity的 dispatchTouchEvent方法的源码。...这里分三步，第一步，如果是触摸开始类型ACTION_DOWN事件，会回调onUserInteraction()方法，所以在项目中可以考虑将一些需要用户开始触摸时就执行的代码放到此方法中；第二步，将触摸事件...都不会再收到点击的触摸事件了。...这也验证了我们关于View触摸事件传递的第二部分，触摸事件ev优先被onTouchListener消费，然后再让传递给onTouchEvent消费。

1.2K3 0

Android触摸事件传递（下）

ViewGroup触摸事件的传递，我们要先了解onInterceptTouchEvent()方法，这个方法默认返回false，表示ViewGroup是否拦截触摸事件，即如果返回true，拦截触摸事件，则不会将任何触摸事件...很明显，我们的按钮的触摸事件和它的父容器的触摸事件，都触发了，这是因为，我们EventBtn的onTouchListener方法和onTouchEvent方法都返回false，没有消费触摸事件，事件会向上继续传递...触摸事件ev会按照子View加入ViewGroup先后顺序相反的顺序，依次有机会去消费此触摸事件ev，即最后加入的最先有机会消费此触摸事件，当然，它消费的前提是，触摸点的坐标在这个子View的frame...我们同样写代码验证。重写EventBtn类，如下， ? 修改onCreate中的代码 ? 修改main布局文件 ? ...通过上面的知识，如果我们不希望响应触摸事件，可以给ACTION_DOWN触摸事件，返回false，或者如果我们希望提前结束一个触摸事件周期，可以给targetView 发送 ACTION_CANCEL事件

1.1K1 0

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

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

4.4K3 0

Android触摸事件_android设置按钮点击事件

在Android系统中，手势的识别是通过 .OnGestureListener接口来实现的,利用，摸屏的Fling、Scroll等方法可以进行滑动或翻页效果的实现;触摸屏相关的事件，是通过onTouchListener...我们可以通过MotionEvent的getAction()方法来获取Touch事件的类型，包括 ACTION_DOWN, ACTION_MOVE, ACTION_UP, 和ACTION_CANCEL。...ACTION_DOWN是指按下触摸屏，ACTION_MOVE是指按下触摸屏后移动受力点，ACTION_UP则是指松开触摸屏；当我们捕捉到Touch操作的时候，如何识别出用户的Gesture？...event); } @Override public boolean onTouch(View v, MotionEvent event) { // 根据触摸的事件来得到手势的事件...return mGestureDetector.onTouchEvent(event); //返回一个手势的事件 } 最后根据手势的事件实现Gesture的相应抽象方法，最重要的是

3.2K2 0

【如果你要学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元素的手指列表如果侦听的是一个

5500 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.监听事件

9843 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)

3.6K9 0

iOS Programming – 触摸事件处理（2）

iOS Programming – 触摸事件处理（2）在上一篇《iOS Programming – 触摸事件处理（1）》中了解触摸、事件和响应者之后，接下去学习如何处理用户的触摸事件。...首先触摸的对象是视图，而视图的类UIView继承了UIRespnder类，但是要对事件作出处理，还需要重写UIResponder类中定义的事件处理函数。...其中touches表示触摸产生的所有UITouch对象，而event表示特定的事件。...因为UIEvent包含了整个触摸过程中所有的触摸对象，因此可以调用allTouches方法获取该事件内所有的触摸对象，也可以调用touchesForVIew：或者touchesForWindows：取出特定视图或者窗口上的触摸对象...在这几个事件中，都可以拿到触摸对象，然后根据其位置，状态，时间属性做逻辑处理。

9387 0

android触摸屏事件,Android Touch事件分析

Android Touch事件分析本文将分析Touch事件的传递。很多复杂的功能都需要深刻的处理Touch事件，例如侧边栏，例如图标的拖动换位。...一，Touch事件的执行轨迹 Down—>MoveàUP/Cancel 二，Touch事件的分类 Touch事件可分为两类：OnTouchEvent和 onInterceptTouchEvent。...消息传递的两种方式(Z轴方向) 前者是正在执行touch事件的方法，后者则是拦截touch事件的方法。...显然，拦截touch事件的前提是有可拦截的touch事件，即存在子view，所以只有ViewGroup才有OnInterceptTouchEvent()方法。...Case3，如果不在ACTION_DOWN事件拦截，而在layout中的ACTION_MOVE事件拦截。

1.5K3 0

android 触摸屏事件_android studio按钮点击事件

由于触摸(Touch)而触发的事件 Android的事件：onClick, onScroll,onFling等等，都是由许多个Touch组成的。...对于android 自定义控件的事件 android提供了一个GestureDetector的类和GestureDetector.OnGestureListener的接口来判断用户在界面上做出怎么样的动作...; } publicbooleanonTouch(View v,MotionEvent event) { returndetector.onTouchEvent(event); } // 用户轻触触摸屏...gestureDetector = new GestureDetector(newHahaGestureDetectorListener()); 然后在View的onTouchEvent里以下这样用，就可以在刚才1)弄的事件里写自己的代码了...default: break; } return true; } }; mView.setOnTouchListener(mTouchListener); 通过此文，希望能帮助开发Android应用使用触摸事件的朋友

2.1K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭