JavaScript移动端事件

最新推荐文章于 2024-06-26 08:10:50 发布
最新推荐文章于 2024-06-26 08:10:50 发布
阅读量1.3k 收藏 1
点赞数 1
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49230250/article/details/107404159
版权

移动端事件

ontouchstart 手指按下
ontouchmove 手指移动
ontouchend 手指抬起

因为浏览器模拟移动端不稳定推荐使用 addEventListener（）
pc端事件写在移动端上有300ms延迟

移动端事件对象

touches 屏幕上的手指列表（集合）
targetTouches 位于当前dom元素上的手指列表 （集合）
changedTouches 触发了当前时间的手指列表（集合）

事件对象的部分属性

target 触发事件的对象
screenX 相对于屏幕的位置
clientX 相对于客户端的位置
pageX 相对于页面的位置
force 按压的力度 0-1之间
identifier 标识 只读
radiusX 触摸的角度
rotationAngle 旋转角度

前端 小吕
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript点击div改变div的颜色
qqq777_的博客
10-21 2232
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ w
js中移动端事件
个人笔记
04-02 752
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <style type=
Javascript：移动端事件
最新发布
听海边涛声
06-26 180
Javascript：移动端事件
移动端 js事件
LGDmar的博客
07-30 266
移动端触屏滑动的效果其实就是图片轮播，在PC的页面上很好实现，绑定click和mouseover等事件来完成。但是在移动设备上，要实现这种轮播的效果，就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。  以下是四种touch事件  touchstart: //手指放到屏幕上时触发  touchmove: //手指在屏幕上滑动式触发  touchend: //手指离开屏幕...
JS移动端事件
benlalagang的博客
08-02 2024
JS移动端事件、触屏事件、事件对象、拖动元素、返回顶部、解决点击延迟、classList方法
移动端JS事件、移动端框架
weixin_30615767的博客
07-24 118
一、移动端的操作方式和PC端是不同的，移动端主要是用手指操作，所以有特殊的touch事件，touch事件包括如下几个事件： 1、手指放到屏幕上时触发 touchstart 2、手指放在屏幕上滑动式触发 touchmove 3、手指离开屏幕时触发。 touchend 4、系统取消touch事件的时候触发，比较少用。 touchcancel 每个事件都有以下列表，比如touch...
js移动端事件基础及常用事件库详解
10-19
本文从移动端事件基础讲起，详细介绍了移动事件和PC端事件的区别，以及如何处理移动端特有的TOUCH事件和GESTURE事件。针对移动端click事件的延迟问题，提供了通过TOUCH事件模拟click和使用fastclick.js库的解决方案...
非常华丽的移动端后台开发模板JavaScript移动端后台开发模板JavaScript
07-05
JavaScript移动端后台开发模板的亮点在于，它结合了前端和后端的特性，提供了一站式的解决方案。例如，Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它可以运行在服务器端，使得JavaScript成为全栈开发的...
原生javascript移动端滑动banner效果
12-07
本文实例为大家分享了移动端滑动banner效果的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=...
javascript学习-移动端事件
qq_43368682的博客
07-29 140
触摸事件touch 屏幕触摸事件，PC端鼠标的移动时点击是无效的。但是在模拟器当中，鼠标的点击就会变为触摸事件。允许多点触控，事件触发的位置信息包含在touches属性里。 常规触摸事件: var body=document.querySelector("body"); body.ontouchstart=function(event){ console.log(event); console.log("触摸开始事件") } body.ontouchmove=fu
移动端js触摸事件详解
11-26
在移动开发中，一种较为容易的做法是，先在桌面上开始原型设计，然后再在打算要支持的设备上处理移动特有的部分。多点触摸正是难以在PC上进行测试的那些功能之一，因为大部分的PC都没有触摸输入。  不得不在移动设备上进行的测试有可能会拉长你的开发周期，因为你所做的每项改变都需要提交代码到服务器上，接着再加载到设备上。然后，一旦运行后，对应用也就没有太多的调试了，因为平板电脑和智能手机都很缺乏web开发者所用的工具。 这个问题的一个解决方案是在开发机器上模拟触发事件。对于单点触摸，触摸事件可以基于鼠标事件来模拟。如果你有触摸输入设备的话，比如说现代的App MacBook，那么多点触摸也可以被模拟。
浅谈移动端之js touch事件 手势滑动事件
11-27
现分享一篇关于touch的文章，望指教！ 原理： 当开始一个touchstart事件的时候，获取此刻手指的横坐标startX和纵坐标startY； 当触发touchmove事件时，在获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后，通过这两次获取的坐标差值来判断手指在手机屏幕上的滑动方向。 具体代码如下： $("body").on("touchstart", function(e) { e.preventDefault(); startX = e.originalEvent.changedTouches[0].pageX, startY = e.originalEve
js---移动端触摸事件
清风的博客
09-16 734
触摸事件 1.触屏touch事件 touch对象代表一个触摸点,触摸点可能是一根手指,或者一根触摸笔,触屏事件可响应用户手指或者触屏笔对屏幕或者触控板操作; //触屏touch事件 //手指触摸到一个DOM元素时触发 touchstart; //手指在一个DOM元素上滑动时触发 touchmove; //手指从一个DOM元素上移开时触发 touchend; 2.触摸事件对象(touchEvent...
web前端—前端三剑客之JS(16)：移动端事件
北冥有鱼的博客
07-10 482
触摸式设备也拥有鼠标事件 目录 移动端的主要事件 移动端事件的触发对象 移动端事件对象的位置属性 移动端事件的触发顺序 其他事件对象 阻止浏览器默认行为 移动端的主要事件 touchstart：当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。 touchmove：当手指在屏幕上滑动时连续地触发。在这个事件发生期间，调用preventDefault() 可以阻止滚动。 touchend：当手指从屏幕上移开时触发。 touchcancel：当系统停止跟踪触摸时触发。...
【Javascript】【事件】处理移动端触摸事件
天天向上 Up Up Up (*^▽^*)
05-23 282
触摸事件只对移动设备有效 <script> $(() => { let elem = $(".clz")[0]; elem.ontouchstart = () => { console.log("on touch start"); }; ...
JavaScript --- 移动端事件
xyue_的博客
05-26 211
触屏事件 1.兼容DOM的触摸事件 touchstart — 当手指触摸屏幕时触发 touchmove — 当手指在屏幕上滑动时连续触发 touchend — 当手指从屏幕上移开时触发 touchcancel — 当系统停止跟踪触摸时触发 上述事件都会冒泡，也都可以取消。每个触摸事件的event对象都提供了在鼠标事件中常见的属性bubbles cancelable view clientX clientY screenX screenY等 2、每个触摸事件包含的三个触摸列表 touches — 当前跟
js 移动端 触屏事件touch
weixin_42448623的博客
06-03 518
touct事件 touchstart 手指触摸到一个DOM元素时触发 touchmove 手指在一个DOM元素上滑动时触发 touchend 手指在一个DOM元素移开时触发 ele.addEventListener('touchstart',function(){}) 触摸事件对象（TouchEvent） TouchEvent是一类描述手指在触摸屏幕的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，增加和减少，等等。 touchstart，touchmove ，touchen
JavaScript手机端触摸移动事件
qq_42940241的博客
05-15 1843
原文参考链接 为什么要模拟这些事件？ 1、上述这些事件中，浏览器直接支持的事件只有点击，而其它事件使用频率也很高。 2、移动端web原生点击事件会有300ms的延迟，因为用户肯能双击，为了判断用户是单击还是双击，所以会有这个延迟，这个延迟会衍生很多问题，例如点击穿透。所以我们可以不用原生的点击事件，而使用模拟点击事件。 如何模拟这些事件呢？ 我们可以总结这些操作，都是手指先触摸屏幕，然后在离开。不同点在于滑动事件手指有位移，而点击事件手指没有位移。 首先想到的就是所有浏览器都是支持touchstart、to
JavaScript移动端电子书翻页效果实现详码与代码示例
本文档详细介绍了如何在JavaScript移动端实现电子书的翻页效果。对于前端开发者来说，这是一个实用且具有学习价值的主题，特别是在处理阅读类应用时，理解并掌握这种交互式体验至关重要。 首先，实现过程涉及以下几...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值