发现在android4.0以上的webkit浏览器touchmove事件只触发一次

最新推荐文章于 2024-05-08 02:30:18 发布
原创 最新推荐文章于 2024-05-08 02:30:18 发布 · 2.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了在Android 4.0及以上版本的WebKit浏览器中遇到的touchmove事件只触发一次的问题，并提供了一个简单有效的解决方案：通过在事件处理函数中调用event.preventDefault()来避免默认行为导致的事件终止。

发现在android4.0以上的webkit浏览器touchmove事件只触发一次



加个event . preventDefault()就可以了。

【JavaScript 】浏览器事件处理
a451319296的博客
08-08 782
浏览器事件是指在网页中发生的各种交互和动作，例如用户点击按钮、页面加载完成、输入框文本变化等。通过处理这些事件，可以编写相应的JavaScript代码来实现特定的功能和行为。
【uniapp小程序】解决touchend事件无法触发的坑！安卓4.0真给我整不会了！
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
10-07 243
在使用uniapp开发微信小程序的过程中，我遇到了一个让人抓狂的 bug。当我尝试用touch系列事件来实现一个下拉功能时，发现touchend居然没有触发！😓我最开始以为是逻辑问题，后来才发现——这是安卓系统的锅。如果你也遇到类似的问题，那这篇文章一定能帮你避坑。安卓的touchend不触发问题，说白了是系统层面的兼容性坑。方案优点缺点可触发 touchend会禁用滚动控制灵活某些安卓仍无效替代简单有效需额外监听稳定性最好改造成本略高✅直接用替代touchend。
安卓机大面积接触导致touchmove事件的处理
donggua_123的博客
04-03 1614
看视频教程时，说到一个安卓机的bug，就是当手指点击页面的面积过大时会触发元素的滑动事件，这样会导致一些不想要的效果。就该问题实测了一番：<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"
js里的php只执行一次,javascript - 移动端touchmove 只执行一次 如何解决
weixin_36035900的博客
03-23 297
var len=$(".wrap .wrap_con").length;var wrap=$(".wrap .wrap_con");var start;for (var i = 0; i < len; ++i) {wrap[i].addEventListener('touchstart', function(e){var touches = event.touches[0];start = ...
touchmove在android下面只触发一次的奇葩设定
一名普通码农的菜地
02-02 4568
touchmove事件只触发一次的问题 　　在Android下直接使用touchmove事件会在很多浏览器中出现每次操作只触发一次touchmove的情况。这是因为Android中对触屏事件奇葩解析造成的，在其它系统上没有这个情况。我们可以在touchstart事件中加入preventDefalut来解决，但这会带来其它问题。 运行<meta name="viewport" content="wid
uniapp中@touchstart，@touchmove，@touchend在微信浏览器上面会失效的解决办法
qq_51035159的博客
01-02 4897
【代码】uniapp中@touchstart，@touchmove，@touchend在微信浏览器上面会失效的解决办法。
微信小程序开发中的手势识别和触摸事件处理
qq_67153941的博客
05-08 975
手势识别是指通过用户在屏幕上的手指移动，识别出用户的手势行为。微信小程序提供了一些内置的手势识别事件，例如tap、longpress、touchstart、touchmove、touchend等。下面将详细介绍这些触摸事件的用法。touchstart事件是手指触摸屏幕的事件，touchmove事件是手指在屏幕上滑动的事件，touchend事件是手指离开屏幕的事件。自定义手势识别事件的实现思路是监听touchstart、touchmove和touchend三个事件，根据用户的手势行为来判断用户的手势。
阻止 mousemove 或 touchmove 与 click 事件同时触发
天问博客-专注于大前端技术
10-26 3052
最近做了自己的开源项目 Msw-Tools，参考了 VConsole 工具中按钮的拖拽功能，计划给 MSW 按钮也增加类似的拖拽效果，并兼容PC端和手机端，但是遇到一个问题：一个按钮绑定了多个事件，怎样才能阻止 mousemove 或 touchmove 与 click 事件同时触发。
HTML5触摸事件(touchstart、touchmove和touchend)的实现
11-20
- **changedTouches**：表示自上一次触摸事件以来发生变化的Touch对象数组，例如在`touchend`事件中，它会包含最后一个抬起的手指的位置信息。 每个Touch对象包含以下属性，提供关于触摸位置和状态的信息： - **...
js canvas触摸只触发touchstart事件不触发touchmove和touchend 如何处理
05-26
如果您的代码调用了`preventDefault()`方法，则将阻止浏览器触发后续的touchmove和touchend事件。 4. 检查设备是否支持touch事件。某些设备（如电脑）可能不支持触摸事件。您可以使用`if('ontouchstart' in window)...
TouchEvent
个人博客
08-20 830
手指接触屏幕就触发，就触发一次@touchend手指从屏幕抬起松开触发一次@touchmove手指在屏幕滑动手指点击，立刻抬起松开，触发一次 touchstart，触发一次touchend，不触发touchmove手指按住，开始移动，触发一次 touchstart，按住移动的过程中持续触发touchmove，抬起松开触发一次 touchendtouchmove 事件中，中途移动到其他元素，Touch对象并不会改变，还是touchstart 一开始的对象。
移动端 touchmove高频事件与requestAnimationFrame的结合优化
热门推荐
不断成长的我
04-28 1万+
移动端最高频耗内存的的操作  莫属 touchmove 与scroll事件  两者需要 微观的 优化； 这里 我们 讲述 touchmove；touchmove 事件发生很频繁，会比屏幕刷新率快，导致无效的渲染和重绘； 帧数 –显示设备通常的刷新率通常是50~60Hz –1000ms / 60 ≈ 16.6ms（1毫秒的优化意味着 6%的性能提升） 浏览器对每一帧
移动端开发踩坑日记——安卓4.4.2不触发touchend事件
newbietao的博客
09-09 2274
背景：最近在公司开发一个景区人流量卡片 要求：卡片类似轮播图，可以左右滑动查看不同的数据 问题：在低端安卓机左右滑动无响应（安卓4.4.2） 解决过程： 1.确定问题所在：我首先考虑到的但是性能问题，由于在touchmove事件中的处里函数非常浪费 性能，所以我再touchmove事件的处里函数里面进行了节流，问题还是没有解决，不但没有解决反而其他的高端机型也变得非常卡顿。然后我又考虑是不
android 将鼠标右键点击事件改为点击后返回功能
android 系统定制开发那些事
05-23 8604
android 将鼠标右键点击事件改为点击后返回功能 在android 系统源码中的以下路径的文件（我的是android 8.0的目录，其他的可能不在这个目录，没关系，直接搜文件名就行） framework\native\services\inputflinger\InputReader.cpp中 uint32_t CursorButtonAccumulator::getButto...
关于浏览器监听mousemove时间间隔
weixin_30377461的博客
03-25 834
STARTMOVE 点击按钮后在页面上轻轻滑动观察console,或者右上角输出框 有几个问题： 1.浏览器下没有渲染到body元素时。document。body是不存在的，所以tool。js要放在body里（在IE下可能存在没有运行完body也不存在（没验证）） 2.tool.js...
移动端中的坑和 vue中事件修饰符详解(stop, prevent, self, once, capture, passive)
易之晓的博客
01-08 2355
.stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件.prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交.self 是只有是自己触发的自己才会执行,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号.capture 是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式.once 是将事件设置...
监听浏览器滚动条触发向上向下事件
baiyan_er的博客
07-03 2617
&lt;script type="text/javascript"&gt; // 监听浏览器滚动条向上向下事件 $(document).ready(function(){ var p=0, t=0; $(window).scroll(function(){ p=$(this).scrol...
小程序开发触摸事件第一次只触发touchstart，第二次才会触发touchmove，touchend
最新发布
10-23
在小程序开发中，若遇到触摸事件第一次仅触发 `touchstart`，第二次才触发 `touchmove` 和 `touchend` 的问题，可参考以下思路解决： ### 1. 检查绑定方式 在微信小程序里，使用 `bind` 绑定触摸事件时，可能会出现真机中事件触发异常的状况，像三个方法在手指离开屏幕后同时执行等问题。可以把 `bind` 替换成 `catch` 来解决此问题。 示例代码如下： ```html <!-- 原来使用 bind 的情况 --> <scroll-view bindtouchstart='start' bindtouchmove='move' bindtouchend='end'></scroll-view> <!-- 修改为 catch --> <scroll-view catchtouchstart='start' catchtouchmove='move' catchtouchend='end'></scroll-view> ``` 通过这样修改，事件能马上执行，而非在手指抬起后同时执行三个事件 [^2]。 ### 2. 检查事件处理函数 要保证 `touchstart`、`touchmove` 和 `touchend` 对应的事件处理函数没有逻辑错误或者阻塞代码，避免影响后续事件的触发。 示例代码如下： ```javascript Page({ start: function(e) { // 处理 touchstart 事件 console.log('touchstart', e); }, move: function(e) { // 处理 touchmove 事件 console.log('touchmove', e); }, end: function(e) { // 处理 touchend 事件 console.log('touchend', e); } }) ``` ### 3. 检查样式和布局 页面的样式和布局也许会对触摸事件的触发产生影响。要确保元素的大小、位置以及 `overflow` 等样式属性没有问题，避免元素被遮挡或者无法正常响应触摸事件。 ### 4. 真机调试和日志输出 运用真机调试功能，在事件处理函数中添加日志输出，详细记录事件触发的情况，从而定位问题。 示例代码如下： ```javascript Page({ start: function(e) { console.log('touchstart triggered', e); }, move: function(e) { console.log('touchmove triggered', e); }, end: function(e) { console.log('touchend triggered', e); } }) ```
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值