【移动端】事件基础

news/2024/10/7 20:21:20 标签: 前端, javascript, html

一、移动端事件分类

移动端事件主要分为以下几类:

1. 触摸事件(Touch Events)

触摸事件是移动设备特有的事件,用来处理用户通过触摸屏幕进行的操作。主要的触摸事件有:

  • touchstart:手指触摸屏幕时触发。
  • touchmove:手指在屏幕上滑动时持续触发。
  • touchend:手指离开屏幕时触发。
  • touchcancel:当触摸被意外中断时(例如电话呼入、页面被打断),触发该事件。

触摸事件对应的监听方法:

html" title=javascript>javascript">element.addEventListener('touchstart', handleTouchStart);
element.addEventListener('touchmove', handleTouchMove);
element.addEventListener('touchend', handleTouchEnd);
element.addEventListener('touchcancel', handleTouchCancel);

2. 手势事件(Gesture Events)

部分移动端浏览器还支持手势事件,例如两个手指同时在屏幕上缩放或旋转。主要的手势事件有:

  • gesturestart:手势操作开始时触发。
  • gesturechange:手势在进行时持续触发。
  • gestureend:手势操作结束时触发。

这些事件通常依赖于多指触控的场景,如缩放(pinch)和旋转(rotate),但由于浏览器的支持不一,实际开发中应用较少。

3. 鼠标事件(Mouse Events)

尽管移动设备没有物理鼠标,但大多数移动设备的浏览器仍然支持传统的鼠标事件。常见的鼠标事件包括:

  • mousedown:手指接触屏幕时(与 touchstart 类似)。
  • mousemove:手指在屏幕上滑动时(与 touchmove 类似)。
  • mouseup:手指离开屏幕时(与 touchend 类似)。
  • click:手指快速点击屏幕时触发(综合了触摸和鼠标操作)。

二、事件对象

在移动端,触摸事件与鼠标事件最大的不同在于事件对象(Event Object),触摸事件有自己独特的事件属性。每个触摸事件对象都会包含一些特殊的信息,用于描述触摸的详细情况。

触摸事件对象的常用属性:

  • touches:当前屏幕上所有触点的列表(多点触控时包含所有触摸点)。
  • targetTouches:当前与目标元素相关的触点列表。
  • changedTouches:自上次触摸事件以来发生变化的触点列表。

每个触点对象(Touch 对象)包含以下属性:

  • clientX / clientY:触点相对于浏览器窗口的 X 和 Y 坐标。
  • screenX / screenY:触点相对于屏幕的 X 和 Y 坐标。
  • target:触点目标的 DOM 元素。

示例:处理触摸事件

html" title=javascript>javascript">element.addEventListener('touchstart', function(event) {
    const touch = event.touches[0]; // 获取第一个触点
    console.log('Touch position: ', touch.clientX, touch.clientY);
});

举个例子:

比如div1、diw2只有div2绑定了touchstart事件,第一次放下一个手指在dv2上,触发了touchstart事件,这个时候,三个集合的内容是一样的,都包含这个手指的touch,然后,再放下两个手指一个在div1上,一个在div2上,这个时候又会触发事件,但changedTouches里面只包含第二个第三个手指的信息,因为第一个没有发生变化,而targetTouches包含的是在第一个手指和第三个在 div2上的手指集合,touches包含屏幕上所有手指的信息,也就是三个手指。
在这里插入图片描述

三、与 PC 端事件的区别

  1. 触摸事件 vs 鼠标事件

    • 触摸事件是多点触控的,可以同时处理多个触点(手指),而鼠标事件是单点事件,只能跟踪一个光标。
    • 移动端事件的触发顺序不同,常见顺序是:touchstart -> touchmove -> touchend,而鼠标事件的顺序是 mousedown -> mousemove -> mouseup
  2. 点击延迟

    • 在移动设备上,当用户点击屏幕时,浏览器会等待大约 300ms 以确定用户是否会进行双击操作。这是移动浏览器的默认行为,用于处理双击缩放。解决方法一:但是现在已经解决了这个问题,只要设置了 viewport 即可:
      html"><meta name="viewport" content="width=device-width, user-scalable=no">
      
      解决方法二:使用移动端专属的触摸事件,不使用 click ,也就自然不存在 300ms 问题。
  3. 默认行为的不同

    • 移动端浏览器会根据触摸操作做出一些默认行为,比如页面滚动、双指缩放等,可能会与页面的自定义逻辑冲突。因此,通常需要阻止这些默认行为。
    • 在触摸事件中可以通过 event.preventDefault() 来阻止默认的浏览器行为,例如页面滚动。

四、事件穿透

事件穿透(Event Penetration 或 Ghost Clicks) 是移动端上面一个非常有名的Bug,其出现场景为:有两层重叠的元素,上面的元素有 touch 事件(点击后要消失),下面是一个默认会触发 click 事件的元素(a、表单元素、带cick事件的壳素),此时点击上一层的元素,下一层也同样会被点击。

解决办法:

  • 使用 preventDefault() 阻止默认行为。
html" title=javascript>javascript">element.addEventListener('touchend', function(event) {
    event.preventDefault();  // 阻止默认的click行为
    // 执行需要的逻辑
});

五、阻止默认事件带来的影响

移动端浏览器有一些默认行为,例如:

  • 页面滚动:当用户在屏幕上滑动时,页面会跟随手指滚动。
  • 双指缩放:用户可以通过双指操作缩放页面。
  • 长按菜单:用户长按某些元素时,会弹出上下文菜单。

阻止默认事件的作用:

  1. 防止页面滚动
    在某些交互场景下,例如全屏的游戏或拖动元素时,默认的页面滚动行为会干扰用户体验。通过在 touchmove 中调用 event.preventDefault() 可以阻止页面滚动。

    html" title=javascript>javascript">element.addEventListener('touchmove', function(event) {
        event.preventDefault(); // 禁止页面跟随手指滚动
    });
    
  2. 阻止双指缩放
    当页面需要固定缩放比例时,双指缩放会影响布局,可以通过以下方式阻止缩放行为:

    html"><meta name="viewport" content="width=device-width, user-scalable=no">
    
  3. 阻止长按弹出菜单
    用户长按图片或链接时,可能会弹出复制、保存等菜单,这对于某些 Web 应用来说是不必要的。可以通过阻止默认事件来禁用此功能。

    html" title=javascript>javascript">element.addEventListener('contextmenu', function(event) {
        event.preventDefault(); // 禁止长按弹出菜单
    });
    

还有一些其他影响等等。

实际上,移动端进行开发时一上来就需要阻止所有的默认事件,后面的很多功能都需要我们自定义来实现。


http://www.niftyadmin.cn/n/5693325.html

相关文章

Vue3常用API总结

因为这个月的月初给自己定了个小目标&#xff0c;学完Vue3的基本使用&#xff0c;并使用Vue3亲手做一个小项目&#xff08;稍微透露一下&#xff0c;我制作的是一个小工具&#xff0c;现在已经完成了90&#xff05;了&#xff0c;这个月月底之前会通过博客的形式向大家展示&…

Maven 入门详解

在 Java 世界中&#xff0c;项目依赖管理就像是一张错综复杂的网&#xff0c;稍有不慎就会陷入 “依赖地狱”。而 Maven&#xff0c;就像一位经验丰富的"项目经理"&#xff0c;为我们提供了一套标准化的项目管理方案&#xff0c;将混乱的依赖关系梳理得井井有条。 1.…

Polars简介

1. Polars基础教程 关键概念&#xff1a; Expression API&#xff1a;用于快速灵活的分析。并行计算&#xff1a;易于实现。惰性模式查询优化&#xff1a;自动进行。流处理&#xff1a;处理超过内存大小的数据集。 导入Polars&#xff1a; import polars as pl配置选项设置&…

mongodb光速上手

开始 mongodb是一种nosql数据库&#xff0c;即非关系型数据库。 安装好后将bin目录添加到环境变量。 安装studio-3t&#xff0c;这是可视化编辑器。 启动 mongo --host localhost --port 27017 指令 查看所有库 show dbs 使用或创建并使用库 use school use 数据库名 向…

智慧学生宿舍管理平台|学生宿舍管理平台系统|基于Springboot+VUE的智慧学生宿舍管理平台系统设计与实现(源码+数据库+文档)

智慧学生宿舍管理平台 目录 基于SpringbootVUE的智慧学生宿舍管理平台系统设计与实现 一、前言 二、系统功能设计 三、系统实现 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#xff1a;✌️大厂码农|毕…

开源跨平台三维模型轻量化软件osgGISPlugins-1、简介

下一篇文章&#xff1a;开源跨平台三维模型轻量化软件osgGISPlugins-2、如何编译 1、仓库地址 github地址&#xff1a;https://github.com/newpeople123/osgGISPlugins gitee地址&#xff1a;https://gitee.com/wtyhz/osg-gis-plugins 2、项目简介 osg引擎的gis插件&#x…

AAA Mysql与redis的主从复制原理

一 &#xff1a;Mysql主从复制 重要的两个日志文件&#xff1a;bin log 和 relay log bin log&#xff1a;二进制日志&#xff08;binnary log&#xff09;以事件形式记录了对MySQL数据库执行更改的所有操作。 relay log&#xff1a;用来保存从节点I/O线程接受的bin log日志…

如何使用ssm实现基于Java的校园二手物品交易平台的设计与实现+vue

TOC ssm789基于Java的校园二手物品交易平台的设计与实现vue 绪论 1.1 研究背景 在这个推荐个性化的时代&#xff0c;采用新技术开发一个校园二手物品交易平台来分享和展示内容是一个永恒不变的需求。本次设计的校园二手物品交易平台有管理员&#xff0c;商家&#xff0c;用…