移动端事件

最新推荐文章于 2024-08-02 13:35:44 发布
最新推荐文章于 2024-08-02 13:35:44 发布
阅读量592 收藏
点赞数
分类专栏： 前端 文章标签： 前端 移动端事件 Touch Pointer
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_14876133/article/details/130402693
版权

文章目录

移动端事件

概述

移动端事件可分为：

  • Touch触摸事件
  • Pointer指针事件

没有移动端事件时，大部分鼠标事件可以在移动端中使用。

苹果推出Touch触摸事件，Touch事件在PC端不会触发。

微软推出Pointer事件，直接继承了鼠标事件，在此基础上又添加了其他一些内容，处理 Pointer 事件和处理鼠标事件几乎一致。移动端和pc端适配推荐使用pointer事件。

兼容性

在这里插入图片描述

在这里插入图片描述

Touch触摸事件

事件类型

事件类型说明
touchstart手指触摸时触发
touchmove手指触摸移动时触发
touchend手指离开时触发
touchcancel触摸被

是否支持事件

if ("ontouchstart" in window) {
    console.log("支持ontouchstart");
} else {
    console.log("不支持ontouchstart");
}

使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Touch事件</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      #box {
        margin: 10px;
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
    <script>
      if ("ontouchstart" in window) {
        console.log("支持ontouchstart");
      } else {
        console.log("不支持ontouchstart");
      }
      let box = document.getElementById("box");
      box.addEventListener("touchstart", startHandler);
      box.addEventListener("touchmove", moveHandler);
      box.addEventListener("touchend", endHandler);
      box.addEventListener("touchcancel", cancelHandler);
      function startHandler(e) {
        console.log("touchstart");
      }
      function moveHandler() {
        console.log("touchmove");
      }
      function endHandler() {
        console.log("touchend");
      }
      function cancelHandler() {
        console.log("touchcancel");
      }
    </script>
  </body>
</html>

event对象

event对象属性说明
type事件类型
target目标元素
touches当前屏幕上所有的触摸点
targetTouches目标元素上的所有触摸点
changedTouches记录触摸状态发生改变的触摸点信息，即只包括新增加的触摸点和移除的触摸点。
box.addEventListener("touchstart", startHandler);
function startHandler(e) {
    console.log("touchstart");
    console.log(e.type);
    console.log(e.target);
    console.log(e.touches);
    console.log(e.targetTouches);
    console.log(e.changedTouches);
}

touch对象

触摸点属性说明
identifier触摸点id（唯一标识），一般多用于多点触摸
target目标元素
screenX/screenY触点相对于屏幕的X、Y坐标
clientX/clientY触摸点相对于浏览器的X、Y坐标 ，不计算滚动条
pageX/pageY触摸点相对于页面的X、Y坐标 ，计算滚动条
function startHandler(e) {
    console.log("touchstart");
    const touch = e.changedTouches[0];
    console.log(touch);
    console.log(touch.identifier); //0
    console.log(touch.target);
    console.log(touch.screenX, touch.screenY); //110 323
    console.log(touch.clientX, touch.clientY); //95 112
    console.log(touch.pageX, touch.pageY); //95 112
}

阻止浏览器默认行为

e.preventDefault()可以阻止滚动、缩放、鼠标事件等默认行为。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Touch事件</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      body {
        height: 2000px;
      }
      #box {
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <img src="./images/1.jpg" alt="" />
    </div>
    <script>
      let box = document.getElementById("box");
      box.addEventListener("touchstart", pointerHandler, false);
      function pointerHandler(e) {
        e.preventDefault();
      }
    </script>
  </body>
</html>

单指拖拽

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Touch事件</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      body {
        height: 2000px;
      }
      #box {
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
    <script>
      let box = document.getElementById("box");

      // 开始点
      const startPoint = {};
      // 目标元素当前位置
      const currentPos = { x: 0, y: 0 };

      box.addEventListener("touchstart", startHandler);
      box.addEventListener("touchmove", moveHandler);
      box.addEventListener("touchend", endHandler);
      box.addEventListener("touchcancel", endHandler);
      function startHandler(e) {
        e.preventDefault();
        const touch = e.changedTouches[0];
        startPoint.x = touch.pageX;
        startPoint.y = touch.pageY;
      }
      function moveHandler(e) {
        const touch = e.changedTouches[0];
        // x轴移动距离
        let distanceX = touch.pageX - startPoint.x;
        // y轴移动距离
        let distanceY = touch.pageY - startPoint.y;
        box.style.left = distanceX + currentPos.x + "px";
        box.style.top = distanceY + currentPos.y + "px";
      }
      function endHandler(e) {
        currentPos.x = parseInt(box.style.left);
        currentPos.y = parseInt(box.style.top);
      }
    </script>
  </body>
</html>

Pointer指针事件

事件类型

事件类型说明
pointerdown指针按下时触发
pointerup指针抬起时触发
pointermove指针移动时触发
pointerenter指针进入目标元素时触发
pointerleave指针离开目标元素时触发
pointerover指针悬停在目标元素上时触发
pointerout指针离开目标元素时触发

是否支持事件

if ("onpointerdown" in window) {
    console.log("支持Pointer事件");
} else {
    console.log("不支持Pointer事件");
}

使用

let box = document.getElementById("box");

box.addEventListener("pointerover", pointerHandler, false);
box.addEventListener("pointerenter", pointerHandler, false);
box.addEventListener("pointerdown", pointerHandler, false);
box.addEventListener("pointermove", pointerHandler, false);
box.addEventListener("pointerup", pointerHandler, false);
box.addEventListener("pointerout", pointerHandler, false);
box.addEventListener("pointerleave", pointerHandler, false);

function pointerHandler(evt) {
    console.log(evt.type);
}

event对象

event对象属性说明
pointerId指针id（唯一标识）
type事件类型
pointerType指针类型（鼠标、笔、触摸）
target目标元素
screenX/screenY指针相对于屏幕的X、Y坐标
clientX/clientY指针相对于可视区域的X、Y坐标，不包括任何滚动偏移
x/yclientX/clientY 的别名
pageX/pageY指针相对于文档的X、Y坐标，包括滚动偏移
box.addEventListener("pointerdown", pointerHandler, false);
function pointerHandler(e) {
    console.log(e);
    console.log(e.pointerId);
    console.log(e.type);
    console.log(e.pointerType);
    console.log(e.target);
    console.log(e.screenX, e.screenY); //114 300
    console.log(e.clientX, e.clientY); //98 144
    console.log(e.x, e.y); //98 144
    console.log(e.pageX, e.pageY); //98 144
}

阻止浏览器默认行为

  • 方式一：通过evt.preventDefault() 阻止默认行为，主要用于PC端，不能阻止滚动、缩放、鼠标事件，可以阻止图片拖动行为。
  • 方式二：通过CSS属性touch-action :none可以阻止所有默认行为。还有其他属性值：
    • auto：默认行为处理触摸事件。
    • none：禁止所有默认行为。
    • pan-x：只处理水平平移手势。
    • pan-y：值处理垂直平移手势。
    • pan-x pan-y：处理水平和垂直平移手势。
    • manipulation：启动所有手势，但经营缩放和滚动手势。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Touch事件</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      #box {
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <img src="./images/1.jpg" alt="" />
    </div>
    <script>
      let box = document.getElementById("box");
      box.addEventListener("pointerdown", pointerHandler, false);
      function pointerHandler(e) {
        e.preventDefault();
      }
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Touch事件</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      body {
        height: 2000px;
        /* 阻止所有默认行为 */
        touch-action: none; 
      }
      #box {
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <img src="./images/1.jpg" alt="" />
    </div>
    </script>
  </body>
</html>

单指拖拽

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Touch事件</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      body {
        height: 2000px;
      }
      #box {
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
    <script>
      let box = document.getElementById("box");
      const startPoint = {};
      const currentPos = { x: 0, y: 0 };
      box.addEventListener("pointerdown", startHandler);
      box.addEventListener("touchstart", (e) => {
        e.preventDefault();
      });
      box.addEventListener("pointermove", moveHandler);
      box.addEventListener("pointerup", endHandler);
      box.addEventListener("pointercancel", endHandler);
      function startHandler(e) {
        startPoint.x = e.pageX;
        startPoint.y = e.pageY;
      }
      function moveHandler(e) {
        let distanceX = e.pageX - startPoint.x;
        let distanceY = e.pageY - startPoint.y;
        box.style.left = currentPos.x + distanceX + "px";
        box.style.top = currentPos.y + distanceY + "px";
      }
      function endHandler(e) {
        currentPos.x = parseInt(box.style.left);
        currentPos.y = parseInt(box.style.top);
      }
    </script>
  </body>
</html>

试试换一种写法：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Touch事件</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      body {
        height: 2000px;
      }
      #box {
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
    <script>
      let box = document.getElementById("box");
      const startPoint = {};
      const currentPos = { x: 0, y: 0 };
      box.addEventListener("pointerdown", startHandler);
      box.addEventListener("touchstart", (e) => {
        e.preventDefault();
      });
      function startHandler(e) {
        startPoint.x = e.pageX;
        startPoint.y = e.pageY;
        document.addEventListener("pointermove", moveHandler);
        document.addEventListener("pointerup", endHandler);
        document.addEventListener("pointercancel", endHandler);
      }
      function moveHandler(e) {
        e.preventDefault;
        let distanceX = e.pageX - startPoint.x;
        let distanceY = e.pageY - startPoint.y;
        box.style.left = currentPos.x + distanceX + "px";
        box.style.top = currentPos.y + distanceY + "px";
      }
      function endHandler(e) {
        currentPos.x = parseInt(box.style.left);
        currentPos.y = parseInt(box.style.top);
        document.removeEventListener("pointermove", moveHandler);
        document.removeEventListener("pointerup", endHandler);
        document.removeEventListener("pointercancel", endHandler);
      }
    </script>
  </body>
</html>
xiangxiongfly915
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
（八）移动端前端开发-移动端事件
m0_56517198的博客
02-14 689
鼠标类：click、mouseover、mouseout、mouseleave、mouseenter、mouseup、mousedown…键盘类：keydown、keyup…其他类：blur、focus、change、load…移动端事件：点击事件\双击事件、滑动事件：上滑、下滑、左滑、右滑、长按事件、摇一摇、重力感应等。。在移动端上使用click事件，会出现300ms延时问题。判断用户操作是否为双击事件，在300ms以内再一次点击了屏幕，浏览器则判断为双击操作。没有点击则为单击操作。touch事件
js移动端事件基础及常用事件库详解
10-19
主要为大家详细介绍了js移动端事件基础及常用事件库，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Javascript：移动端事件
听海边涛声
06-26 163
Javascript：移动端事件
Web APIs 学习归纳8---移动端特效
SPIRITE_SYF的博客
05-03 1325
移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动 端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有。touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控 笔）对屏幕或者触控板操作。<body><script>// 1. 获取元素// 2. 手指触摸DOM元素事件console.log('我摸了你');});
JS移动端事件
benlalagang的博客
08-02 2009
JS移动端事件、触屏事件、事件对象、拖动元素、返回顶部、解决点击延迟、classList方法
移动端 事件
爱睡的虫虫
05-17 1984
touch事件 什么是touch事件？ 随着智能手机和平板电脑的普及, 越来越多的人用移动设备浏览网页，我们平时在pc浏览器上用的鼠标事件，比如：click, mouseover等， 已经无法满足移动设备触摸屏的特点。 触摸时代的到来，离不开触摸事件 touch事件用于移动端，可响应用户手指（或触控笔）对屏幕或者触控板操作，给基于触控操作，给基于触控的用户界面提供可靠的支持。 手机中click事件...
《四》移动端事件
花铛
10-06 1613
由于pointerover、pointerout 支持事件冒泡，pointerenter、pointerleave 不支持事件冒泡，因此在子元素上进入或离开的时候会触发其父元素的 pointerover、pointerout事件，但是却不会触发 pointerenter、pointerleave 事件。此时，touches 中有三个触摸点，targetTouches 中有两个触摸点，changeTouches 中有一个触摸点，就是滑动了的那根手机的触摸点。目标元素上所有的触摸点组成的类数组。
移动端事件库
XXX51129的博客
12-10 132
Touch.js Touch.js是移动设备上的手势识别与事件库, 由百度云Clouda团队维护，也是在百度内部广泛使用的开发工具.(已停更) Touch.js手势库专为移动设备设计,是Web移动端touch点击事件不错的解决方案 GitHub - Clouda-team/touchjs: Touchjs getsture library 支持移动端事件（部分） 属性 设备类型 tap 单击屏幕 doubletap 双击屏幕 swipe 滑动 swipele
Vue入门（十一）之移动端事件
qq_38256266的博客
08-18 3158
vueX补充及移动端事件1、vueX补充2、postman3、移动端事件3.1、click事件（单击事件）3.2、touch类事件（触摸事件）3.3、touch的优先级高于click3.4、阻止click事件的触发3.5、点透3.6、第三方的移动端事件库4、下拉刷新上拉加载（Better-scroll） 1、vueX补充 mapState, mapGetters, mapActions, mapMutations 昨天我们讲到vueX的基本使用，当一个组件需要获取多个状态的时候，代码会有些重复和冗余。 这时
移动端事件顺序、解决300毫秒点击延迟
weixin_43294560的博客
06-08 664
【代码】移动端事件顺序、解决300毫秒点击延迟。
移动端事件穿透的原理与解决方案.docx
10-26
移动端事件穿透的原理与解决方案.docx
移动端事件相关,布局.rar
09-16
本文将深入探讨这两个主题，并结合"移动端事件相关,布局.pdf"中的内容，提供详尽的解析。 首先，我们来谈谈移动端事件。在移动设备上，用户与应用的交互主要通过触摸屏幕来实现，因此理解和掌握各种触摸事件是至关...
移动端基础事件总结与应用
08-31
为防止移动端事件引发的默认浏览器行为，例如页面滚动，我们需要在事件处理函数中调用`event.preventDefault()`来阻止默认行为。以下是一个简单的触摸事件监听示例： ```javascript document.addEventListener('...
前端Web-JavaScript(上)
Yu2uki的博客
07-31 1405
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
高德地图离线版 使用高德地图api的方法
最新发布
m0_62336925的博客
08-02 320
然因为高德地图的瓦片地图太大，所以要让后端部署下 前端直接调用 如果本地 直接找到瓦片图路径就可以。这个代码把你想用的方法名保存到本地。这个时候会报错 因为没有这个方法。然后就可以正常使用这个方法拉。然后使用他的离线方法。找到对应的名字 复制。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 892
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
前端面试：项目细节重难点问题分享（十四）
weixin_49062485的博客
08-02 370
更多详情：爱米的前端小笔记（csdn~xitujuejin~zhiHu~Baidu~小红shu）同步更新，等你来看！都是利用下班时间整理的，整理不易，大家多多👍💛➕🤔哦！你们的支持才是我不断更新的动力！
【前端面试】五、框架
weixin_49015558的博客
07-31 494
1 Vue2 2 Vue3 3 React 4 Angular
移动端双指事件
05-27
移动端双指事件通常是用于实现缩放或者旋转操作的，常见的事件有touchstart、touchmove、touchend等。以下是一些常用的双指事件： 1. touchstart事件 当有两个手指同时放在屏幕上时，会触发touchstart事件。此时...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值