滚动事件和点击事件是存在一些兼容性问题的

阻止 mousemove 或 touchmove 与 click 事件同时触发 最近做了自己的开源项目 Msw-Tools,参考了 VConsole 工具中按钮的拖拽功能,计划给 MSW 按钮也增加类似的拖拽效果,并兼容PC端和手机端,但是遇到一个问题:一个按钮绑定了多个事件,怎样才能阻止 mousemove 或 touchmove 与 click 事件同时触发。 阅读详情

在 iOS 中,滚动事件和点击事件是存在一些兼容性问题的。当页面发生了滚动,点击事件可能无法被触发。造成该问题的原因是 iOS 的默认行为会处理滚动事件,导致同一时间内无法触发点击事件。

为了解决这个问题,我们通常可以采取以下方法之一:

1. 使用 touchstart 和 touchend 事件代替 click 事件

像下面这样,你可以在 touchstart 触发时阻止事件冒泡,而在 touchend 时手动触发链接或其他点击事件:

```javascript
var touchstartX = 0;
var touchstartY = 0;

elem.addEventListener('touchstart', function(event) {
    touchstartX = event.changedTouches[0].screenX;
    touchstartY = event.changedTouches[0].screenY;
});

elem.addEventListener('touchend', function(event) {
    var touchendX = event.changedTouches[0].screenX;
    var touchendY = event.changedTouches[0].screenY;
    if (Math.abs(touchendX - touchstartX) < 10 && Math.abs(touchendY - touchstartY) < 10) {
        event.preventDefault();
        // 手动触发链接或其他点击事件
    }
});
```

在这个代码是中,我们依然使用 touchstart 和 touchend 事件代替了 click 事件,并手动触发了链接或其他点击事件。

2. 使用 touchmove 事件来禁用默认的浏览器滚动行为

在 touchmove 事件触发时,禁止浏览器的默认滚动行为,可以保证点击事件可以正常触发。

```javascript
document.addEventListener('touchmove', function(e) {
      // 取消浏览器的默认滚动行为
      e.preventDefault();
}, {passive: false});
```

从 iOS11 开始,浏览器中的监听器默认被设置为 passive,我们向 addEventListener 中添加 passive:false 参数来禁用 passive 监听器。

3. 利用 ES6 语法简化代码

可以使用 ES6 的写法来简化上述代码,如下所示:

```javascript
elem.addEventListener('touchstart', event => {
  touchstartX = event.changedTouches[0].screenX;
  touchstartY = event.changedTouches[0].screenY;
});
  
elem.addEventListener('touchend', event => {
  const touchendX = event.changedTouches[0].screenX;
  const touchendY = event.changedTouches[0].screenY;
  if (Math.abs(touchendX - touchstartX) < 10 && Math.abs(touchendY - touchstartY) < 10) {
    event.preventDefault();
    // 手动触发链接或其他点击事件
  }
})
```

以上是一些解决 iOS 中滚动和点击事件兼容性问题的方法,具体采取哪种方案需要根据实际情况来决定。如果你还有其他问题,欢迎继续提问。

移动端兼容性问题集锦 去年主要工作就是混合开发,写app内嵌的h5。在开发期间多多少少遇到些兼容性问题,最近工作比较清闲,整理下方便以后查阅,也希望能帮助到一些同学。并且本文会持续补充内容,欢迎关注我,另外我会更新一些前端方面的其他一些知识。 阅读详情

相关推荐

uniapp微信小程序踩坑实录:uCharts在scroll-view中的滚动与点击事件修复指南

本文详细解析了在Uniapp微信小程序开发中,uCharts组件在scroll-view容器中的常见问题及解决方案。通过启用canvas2d模式、优化scroll-view配置以及处理触摸事件冲突,实现图表与滚动容器的完美适配。特别针对真机与模拟器表现差异、滚动条失效等痛点问题,提供了实战验证的有效修复方案,助力开发者提升数据可视化组件的交互体验。

rainy的博客 1023

H5在iOS上的滚动兼容问题

H5在iOS上的滚动兼容问题

LiAly66的博客 1549

美化和定制滚动条:CSS滚动条样式全攻略

本文还有配套的精品资源,点击获取 简介:文章介绍了在网页设计中如何通过CSS定制和美化默认的浏览器滚动条,以提升网站视觉效果和用户体验。通过使用CSS的滚动条属性、伪元素选择器以及考虑响应式设计,开发者可以创建符合网页风格的滚动条样式。文章还提供了示例代码,适用于基于WebKit的浏览器,而对其他浏览器的兼容性则可能需要额外的工具或前缀。 1. CSS滚动条属性使...

weixin_42451850的博客 5853

Android滑动冲突的完美解决方案

一、Android滑动冲突的完美解决方案 在Android开发中滑动冲突可以说是比较常见的一类问题,也是比较让人头疼的一类问题,两个原本完美的控件,组合在一起之后,忽然发现整个世界都不好了。滑动冲突主要分为同方向滑动冲突和不同方向滑动冲突,下面本文将详细说明两种滑动冲突如何解决。 关于滑动冲突 在Android开发中,如果是一些简单的布局,都很容易搞定,但是一旦涉及到复杂

nicolelili1的专栏 1万+

基于JavaScript的滚动条交互事件实战详解

传统做法往往等到元素完全出现在视口中才执行动作,但这在网络较慢或资源较大时会造成明显延迟感。通过设置触区,可以实现“预加载”、“预动画”等体验优化策略。例如:- 图片距离视口上方还有300px时就开始加载;- 导航标题在进入视口75%时即激活对应锚点;- 聊天消息列表在滚动到底部90%时自动请求下一页。这些行为的背后都依赖于一个统一的触区判定模型。Sidebar类作为整个模块的主控中心,负责初始化DOM绑定、监听滚动事件、计算位置状态,并动态更新CSS类名以触发样式变化。

weixin_42593701的博客 1105

jQuery滚动条插件:全浏览器兼容的滚动条控制

滚动条是网页中常见的一种用户交互元素,它允许用户浏览超出视图窗口的内容。随着Web应用的日益复杂,传统的滚动条已经不能满足现代用户界面的需求。在这样的背景下,jQuery滚动条插件应运而生,它不仅能够提供更加丰富和流畅的用户体验,还可以根据设计师的需求定制外观和行为。本章节将介绍jQuery滚动条插件的基本概念及其核心功能。我们将探讨这些插件如何帮助开发者改善网页滚动体验,并为下一章节的浏览器兼容性问题打下基础。

weixin_36303807的博客 1106

进行animation时点击事件无法响应的解决办法(animation进行时默认是禁止交互)

进行animation时点击事件无法响应的解决办法(animation进行时默认是禁止交互)

wownbafifa的博客 2180

ROS2+PYTHON VENV虚拟环境配置方法

ROS2+PYTHON VENV配置方法本篇针对的是python。

下雨夏云的博客 555

一种解决滑动事件和点击事件冲突的方法

滑动事件和点击事件冲突

张平的专栏 9992

告别概念晕眩:用TC3xx SMU和TLF35584的配置实例,搞懂ASIL D功能安全落地

本文通过英飞凌TC3xx系列MCU的SMU模块与TLF35584电源管理芯片的协同配置实例,详细解析了如何实现符合ASIL D功能安全标准的刹车辅助ECU。文章涵盖SMU报警源配置、响应动作类型、TLF35584的安全状态管理,以及构建完整安全闭环的实践方法,帮助工程师将抽象的安全概念落地为具体设计方案。

weixin_30647065的博客 436

ros1 ubuntu22.04 安装教程

ROS1 ubuntu22.04 安装教程

autolabor的博客 9195

js简单的返回顶部

1、一般这种都伴随着浏览器离开顶部后出现回到顶部的div,然后点击div回到顶部,然后判断你的页面处于浏览器顶部,隐藏你的回到顶部按钮,需要去判断你的浏览器是否位于顶部csdn的回到顶部按钮2、我实现的思路比较简单,写一个透明的,高度只有1像素的div放在最顶上,让js判断浏览器窗口的高度是否大于div的高度,大于就显示你的回到顶部,小于就隐藏3、写一个用来回滚到顶部的按钮,设置样式并固定它在你想要固定的高度上(浏览器窗口)4、写一个div撑开浏览器高度(页面原来够高出现滚动条忽略这个)5、js部分,先获取

VibMike的博客 6436

使用pytorch构建LSTM_AE模型的两种方式

2.基本LSTM_Unit计算——基本LSTM_AE结构 3.自定义LSTM_Unit计算——自定义LSTM_AE结构 1.LSTM-Encoder-Decoder模型结构及简要解析 图基本lstm计算单元

qq_37840762的博客 7273

安卓和ios兼容性问题梳理

问题1:移动端项目要求是全屏滚动,用的是 fullpage,上下滚动时安卓正常,苹果手机浏览器上下滚动时会出现底色问题 解决方案: document.body.addEventListener(‘touchmove’, function (e) { e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果) }, {passive: false}); 问题2:移动端用video标签用苹果手机在浏览器上打开和安卓机上打开是不一样的 解决方案: 苹果机默认打开video是全屏的,所以要

A_bet_of_three_years的博客 3966

HFSS/ADS仿真实操:手把手调优一个2.4GHz SAW滤波器的IDT结构

本文详细介绍了使用HFSS和ADS仿真工具优化2.4GHz表面声波滤波器(SAW)的IDT结构。从材料参数设置到IDT建模,再到参数化扫描与频率调谐,提供了实用的操作步骤和优化技巧,帮助工程师快速掌握SAW滤波器的设计方案与性能调优方法。

weixin_29197835的博客 531

API Streaming Failed 400 <400>InternalError.Algo.InvalidParameter input content must be a string解决方案

本文主要介绍了API Streaming Failed 400 <400> InternalError.Algo.InvalidParameter input content must be a string解决方案,希望能对使用vscode中cline的同学们有所帮助。 文章目录 1. 问题描述 2. 解决方案

weixin_43178406的博客 3万+

【JavaScript】页面滚动事件详解

页面滚动事件是浏览器在用户滚动页面时触发的事件。无论是通过鼠标滚轮、键盘上的箭头键,还是触控设备的滑动动作,只要页面内容发生了滚动,就会触发scroll事件。JavaScript 提供了一个简单的方式来监听这个事件,通过window或特定 DOM 元素的方法,我们可以对滚动行为做出反应。console.log('页面正在滚动');});页面滚动事件是 Web 开发中不可或缺的工具,通过它,开发者可以实现丰富的用户交互功能,如回到顶部按钮、无限滚动加载、滚动动画等。

lph159的博客 5589

VS2019编译使用log4cplus 1.2.0

logger.properties 文件。第三步,创建项目来测试,配置库。第二步,使用VS2019编译。

h a 6 6 6 c k 为 你解决复杂难题! 525

苹果点击事件兼容性问题

苹果点击事件兼容性问题 比如这样一个标签 <div class="infoDetail">查看详情</div> 正常我们写点击事件的话就是这样: $("body").on("click",".infoDetail",function(){ console.log("点击了查看详情"); }); 但是这样在苹果机上就点击失效,安卓就没事,真是个奇葩问题,最后找到了解决这个问题的办法,给要点击的元素添加小手样式,如: .infoDetail{ cursor:pointe

Swallow的博客 521

基于Pascal VOC数据集的YOLOv8目标检测系统实现:人、鸟、猫、牛、电视、车等20类目标识别与UI界面部署全流程详解

VOC 2007、VOC 2012 两个主要版本;每个图像提供 bounding box(目标框)+ 目标类别;共计 20 类,所有图像手工标注,质量高。完整复现 Pascal VOC 20类检测任务成功训练 YOLOv8 模型实现可视化 UI + 实时检测系统支持多平台部署和演示。

YOLO 771

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

四十、鼠标滚轴、滚动条事件

一、鼠标滚轴事件 存在浏览器兼容问题说明:当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时(上/下),就会触发滚轴事件,且这个事件可以在任何元素上触发,最终会冒泡到document(IE)或window(Opera、Chrome和Safari)对象。 1.在IE、Opera、Chrome和Safari中鼠标滚轴事件为:onmousewheel  当转动鼠标滚轮时运行脚本判断滚动方向:在mous...

weixin_40976555的博客 1256

文档:亲测可用解决vnc灰屏,黑屏,鼠标大黑叉情况

主要解决vnc-viewer灰屏,黑屏,鼠标大黑叉等现象,详细见文档。

JS总结笔记:鼠标滚动事件DOMMouseScroll和mousewheel

鼠标滚动事件 鼠标滚动事件在不同的浏览器是有些区别的,五大浏览器(IE、Opera、 Safari、Firefox、Chrome)主要体现在Firefox与其他四个浏览器的区别 滚轮事件的区别 Firefox的滚轮事件使用 DOMMouseScroll 其他浏览器的滚轮事件使用 mousewheel 捕获滚轮信息的区别 滚动事件触发时Firefox使用detail属性捕捉滚轮信息,其他的浏览器...

weixin_41350225的博客 2763

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能:商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传,基本资料下载,开钱箱、小票打印、收款结算,支持多币种付款方式(现金、储值卡、礼券、微信等),支持多种促销。运行环境:.net 4.0登陆信息用户名:1001 密码:123456内置商品信息,商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

img 点击事件_JavaScript-事件的绑定和事件对象Event

绑定事件的两种方式/DOM事件的级别我们在之前的一篇文章《04-JavaScript/22-DOM简介和DOM操作》中已经讲过事件的概念。这里讲一下绑定(注册)事件的两种方式,我们以onclick事件为例。DOM0的写法:onclick element.onclick = function () { }举例:点我点击按钮后,上方代码的打印结果:事件2我们可以看到,DOM对象.事件 = ...

weixin_39844963的博客 1366

scroll 滚动事件节流、requestAnimationFrame、性能优化

由于滚动事件可以高速触发,因此事件处理程序不应执行计算成本高的操作,例如 DOM 修改。建议使用 requestAnimationFrame来节流,使用AddEventListenerOptions的passive来提供滚屏性能,防止卡顿。

Kate_sicheng的博客 4158

鼠标横向滚动条 和 鼠标滚动方向

鼠标横向滚动的思路 阻止鼠标滚动影响纵向滚动条的行为 找到影响滚动条的容器的 scrollLeft 属性为 根据鼠标的滚轮方向,决定滚动条是向左还是向右滚动 案例实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="...

黄彪博客 3347

怎么触发子级的点击事件_JavaScript学习笔记(十五)—Event事件(上)

EVENT(上)之前我们简单的了解过一些事件,比如 onclick / onload / onscroll / ...今天开始,我们详细的学习一些 事件什么是事件一个事件由什么东西组成触发谁的事件:事件源触发什么事件:事件类型触发以后做什么:事件处理函数var oDiv = document.querySelector('div')​oDiv.onclick = function () {}// ...

weixin_29828857的博客 403
上一篇: 数组 处理数据
下一篇: 监听回退vue2
cv酱
博客等级 码龄5年 7粉丝 53原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值