一体机上web程序的touchmove和mousemove事件无法触发问题

最新推荐文章于 2025-04-14 16:58:16 发布
原创 最新推荐文章于 2025-04-14 16:58:16 发布 · 2.9k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#mousemove #touchmove #一体机 #无法触发

本文介绍了一种解决网页在一体机上因touchmove和mousemove事件导致页面跟随手指移动的问题的方法。通过在CSS中设置-ms-touch-action:none，可以使touchmove和mousemove事件正常触发而不引起页面滚动。

在一体机上的web程序 touchmove和mousemove是不太方便触发到的。

点击页面，移动，整个页面就会跟着移动。

个人怀疑是touchmove和mousemove被解释成手势了。


只要在css里加上-ms-touch-action:none，再点击、移动，整个页面就不会跟着移动了。

touchmove和mousemove正常触发

cddhy
关注
在同时支持鼠标与触摸的设备上，如何为 SAP UI5 控件实现一套不重不漏的输入事件模型
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
10-16 54
摘要 SAP UI5的事件委派机制已为控件开发者处理混合输入场景（如触摸屏+鼠标）提供支持，自动过滤触摸触发的模拟鼠标事件。若需绕过UI5直接使用jQuery或原生事件监听，需手动通过oEvent.isMarked('delayedMouseEvent')或oEvent._sapui_delayedMouseEvent排除模拟事件。改造旧代码时，应摒弃Device.support.touch分支，改为同时监听触摸与鼠标事件，并统一过滤逻辑。文中以sap.m.RatingIndicator为例，展示如何通过事
uniapp中touchstart、touchmove和touchend在H5中无法触发，可通过jQuery添相应事件代替
热门推荐
觉醒法师的专栏
03-08 2万+
uniapp中touchstart、touchmove和touchend在H5中无法触发，可通过jQuery添相应事件代替
关于uniapp @touchend 、@touchmove不触发的问题
最新发布
qq_42544241的博客
04-14 926
touchstart、@longpress能正常触发；有时候能触发、有时候不能；试了好久发现了这个原因。
pad端无法触发touchmove事件
fortune丶的blog
04-15 923
删除线格式 在一次实现canvas签名的时候，在微软 surface pad中的ie浏览器无法触发touchmove，而是一直触发mousestart，但是不触发mousemove，只有长按滑动才会触发一段mousemove。 解决办法 给使用的地方加上一个css touch-action: none; 加上上面的class轻松的解决了这个问题。 touch-action在MDN是这样介绍to...
鼠标拖拽mousemove和移动端touchmove问题
xiaowinwin的专栏
10-21 2191
(转自https://segmentfault.com/a/1190000019581578） 需求 移动实现手指触摸移动物体 PC端实现鼠标拖拽物体 实现 移动端 通过touchstart和touchmove事件实现 1、touchstart时记录手指按下的位置 x=event.touch[0].pageX, y=event.touch[0].pageY,为A(为了方便描述) 2、移动时touchmove中获取移动过程中的位置,为B 3、计算此次移动的距离C（正或者负）， 4、将移动物体的绝对位置
记录bug以及修复过程-uniapp touchmove使用stop.prevent后touchmove事件失效
qq_65839745的博客
05-21 1725
写uniapp的时候用到了ucharts的折线图，这个折线图我是放在component里面作为组件调用的，但是我调用的位置又是在swiper里面，那么问题来了，两个组件都具有横向的touchmove事件，这就需要使用到事件冒泡了，随后进入ucharts内修改源码。然后我就想既然是事件冒泡，那么就是一层层往上走的触发链，我需要保证我下层的盒子可以触发但是上层的盒子不能触发，那么最简单粗暴的就是中间加一层可以拦截该事件的盒子就行了，正好上述文献中提到需要加一个scroll-x的scroll盒子，于是就有了。
纯JavaScript实现滑块验证功能
综上所述，SliderValidation 是一个集实用性、安全性与美观性于一体的前端解决方案，体现了现代 Web 开发中对人机交互与安全防护双重需求的平衡。通过对原生 JavaScript 的深度运用，展示了如何在无框架环境下构建...
支持多端的jQuery拖拽插件，兼容手机与电脑端操作
综上所述，jquery-udraggable 是一款集跨平台支持、灵活配置、精细控制于一体的 jQuery 拖拽解决方案，具备边框限制、手柄控制、单轴锁定、坐标获取等多项实用功能，适用于构建高度交互性的 Web 应用程序，尤其适合...
拖拽卡顿终结方案：React_Vue中事件节流与重绘优化的4个核心技巧
而当你打开 DevTools 的 Performance 面板一看——天呐，主线程被 `mousemove` 事件塞得满满当当，每秒触发上百次回调，CPU 占用率飙升到 90% 以上。 这并不是个例。**拖拽交互看似简单，实则是前端性能优化的“试...
基于jQuery实现鼠标滑动导航切换大图效果
此时可通过监听touchstart和touchmove事件替代鼠标事件，确保在平板或手机上也能正常滑动切换。同时，利用媒体查询（Media Queries）调整布局尺寸，保证不同屏幕下导航条与大图的比例协调。 综上所述，“jQuery鼠标...
3d 云标签，支持mousemove touchmove自有惯性滚动
01-24
3d 云标签，支持mousemove touchmove自有惯性滚动。
触屏事件 touch
Gnaf12345的博客
05-25 635
触屏包括的事件： touchstart当手指触摸屏幕时触发 touchmove当手指在屏幕上滑动时连续触发 touchend当手指从屏幕上移开时触发 touchcancel当系统停止跟踪触摸时触发 每个touch事件都包括 touches targetTouches chnageTouches touch的属性： clientX 触摸目标在视口中的x坐标1 clientY 触摸目标在视口中的y坐标 pageX触摸目标在页面中的x坐标 pageY触摸目标在页面中的y坐标 screenX触摸
touchstart, touchmove, touchend, mousedown, mousemove, mouseup, 手机端和pc端点击及触摸事件
Sayesan的专栏
11-05 2896
touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。 touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。 touchend事件：当手指从屏幕上离开的时候触发。 touchcancel事件：当系统停止跟踪触摸的时候触发。  initTouchEvents: function...
web移动端 touchstar事件,touchmove事件 touchend事件
一个半路出家的人
10-23 1504
web移动端开发中常用的三个事件,现在的智能机都是触屏操作.所以触摸在移动端的开发中几乎无处不在,下面介绍移动开发中常用的几个事件 touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。 touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。 touchend事件：当手指从屏幕上...
uniapp中@touchstart，@touchmove，@touchend在微信浏览器上面会失效的解决办法
qq_51035159的博客
01-02 4899
【代码】uniapp中@touchstart，@touchmove，@touchend在微信浏览器上面会失效的解决办法。
mousedown、mousemove、mouseup和touchstart、touchmove、touchend
weixin_34283445的博客
11-20 1077
拖动时候用到的三个事件：mousedown、mousemove、mouseup在移动端都不起任何作用。毕竟移动端是没有鼠标的，查资料后发现，在移动端与之相对应的分别是：touchstart、touchmove、touchend事件。还有一点要注意的是在PC端获取当前鼠标的坐标是：event.clientX和event.clientY，在移动端获取坐标位置则是：event.touches[0].cl...
移动端事件
visibleforest的博客
09-18 651
grid项目的属性： grid-column-start和grid-column-end、grid-row-start和grid-row-end:项目网格的开始和结束； 取值： 1.number型，是网格线的序号， *项目可以重叠，使用z-index决定谁在上面 2.name,通过名字来引用一个命名的网格线 3.span number :该网格项将跨越所提供的网格数量 grid-row/grid-column分别是grid-row-start和grid-row-end/grid-column-s
移动端事件学习（1）
小李不吃肉
06-22 290
移动端事件学习（1） 1：基础事件 touchstart 手指按下事件 touchmove 移动 类似mousemove touchend 手指抬起 最好要用事件添加函数，不要用on 2：移动端与pc端事件的区别 （1）触发点不同 pc端 ：mousemove 不需要鼠标按下，但必须要在绑定的元素身上 mouseup：必须要在元素身上 移动端： touchmove:必须要手指按下，之后不...
解决Echarts-dataZoom在windows触屏（一体机）设备上无法触屏拖动问题。
DDDHL_的博客
12-18 5160
用echarts绘制了折线图，开启dataZoom功能后，在windows下用鼠标点击拖动与使用移动设备触屏拖动均正常。但是，如果是windows触屏设备，使用触屏时拖不动下方的dataZoom。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值