pad端无法触发touchmove事件

最新推荐文章于 2022-06-22 07:24:24 发布
最新推荐文章于 2022-06-22 07:24:24 发布
阅读量793 收藏 1
点赞数
分类专栏： 移动端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40428678/article/details/105546579
版权

删除线格式 在一次实现canvas签名的时候，在微软 surface pad中的ie浏览器无法触发touchmove，而是一直触发mousestart，但是不触发mousemove，只有长按滑动才会触发一段mousemove。

解决办法

给使用的地方加上一个css

touch-action: none;

加上上面的class轻松的解决了这个问题。

touch-action在MDN是这样介绍touch-action的。
在这里插入图片描述
点击touch-action看MDN了解更多。

想看canvas实现签名请点击下面链接
码知秋
关注
专栏目录
移动端touchmove事件边界touchend不触发
qjl_0805的博客
06-28 7329
做前端一年整，碰到不少问题，以前都是找资源，解决问题，不会去分享资源，这次是我第一次写博客，如果有什么问题，欢迎来交流。 在过去一年的时间里，我所接触的多有是移动端的项目，移动前端中，touch触摸事件经常会涉及到，轮播图，上拉加载，都要用到touch事件，有用过插件，也有自己写过一些事件。关于touch事件中关键的3个事件 touchstart, touchmove, touchend
点击click事件在iPad没有响应
csr0312的专栏
08-19 5681
本来在ipad使用tap事件，工作的很好。但是需求改变，要适应PC跟ipad，所以索性直接替换zepto改成jquery。理想不错，但是现实是，在浏览器上click事件工作得很好，切换到模拟器上面，也运行不错，但是切换到真机ipad上面，悲剧了，根本不响应click事件。查看了一遍又输出，还是木有反应。急了，只能求助谷歌了，click no action in pad 第一条出来的就是stackov
微信小程序画布Canvas组件touchend事件不触发处理
chuangxin的专栏
10-17 7952
微信小程序画布Canvas组件touchend事件不触发处理
通过使用scroll 发现Edge浏览器不支持touch事件的问题总结---小收获
weixin_30379973的博客
08-26 663
在开发中遇到需要监听滚轮事件，实现页面交互，但是同时需要兼容多端 PC端能正常使用鼠标实现页面效果，并且兼容高级的浏览器，包括Edge浏览器； 但是在使用ThinkPad的触摸板和触屏，例如iPad使用Edge浏览器时，无法触发scroll或者使用touch触发， 经过查询发现 chrome/webkit中的touch一干事件在edge中无效，edge延续的是IE1...
首次加载页面时，Android Chrome上永远不会触发Touchstart事件
liuliuhelingdao的博客
06-22 458
On Android Chrome, when you create a new tab and access to a page with the content below, your touches to #touch div have never triggered touch-start events. Once you reload the page, you can trigger the event.在Android Chrome上，当您创建新标签页并访问包含以下内容的页面时，您对#touc
uniapp dragball（浮动球）页面第一次加载点击事件不触发问题解决
u012693016的博客
02-11 1193
一、原因 dragBall.vue组件中的touchend方法判断click事件触发条件有问题，导致click事件没有触发，经测试，这一问题只在安卓中存在，苹果手机没问题，涉及dragBall.vue组件源码如下 修正前 修正后 即修改以下3个判断非单击事件条件的值，直到可以触发click事件为止，真机调试可以将条件值alert出来 1、this.endTime - this.startTime 2、Math.abs(this.move.x) 3、Math.abs(this.move.y) 这里我只将.
web前端领域移动端自定义长按事件你用过吗？
qq_19891827的博客
03-05 4166
一。在移动端开发过程中经常会用到长按事件，例如游戏中人物，长按上下左右会持续移动人物的位置，这是一个典型的长按事件的需求，但javaScript原生不支持长按事件，这就需要我们自定义一个长按事件以满足我们的需求。1.由于移动端长按元素会触发许多默认行为，所以第一步我们要禁掉这些默认行为，css代码如下。body { -webkit-touch-callout: none !important...
PC端适配到移动端记录
qq_36205941的博客
09-14 453
一、前言 最近遇到了将PC端的编辑器（在线设计编辑器）兼容到pad端，为什么不是手机端呢，因为我们手机端已经有一套专门的编辑器，但是在pad上无法直接用移动端的编辑器。之前做过的兼容基本上都是视觉上的适配，但是在编辑器中，需要各种手势的兼容，所以下面从两个方面进行分析 这里推荐一下我们的稿定编辑器哈，功能很全，性能也还ok。 稿定设计 二、适配过程 2.1 收集当前编辑器在pad端存在的问题 选中元素后后无法通过手势移动。 文本元素调起键盘特别困难，canva的交互为当元素处于选中状态并为文本元素
JS案例：支持PC端和Mobile端的Canvas电子签名功能
web18334137065的博客
03-03 294
前言： 这段时间项目迭代时遇到了一个新需求，基于react实现一个Pc版电子签名功能，并生成图片上传。于是我想到了signature_pad，并且在项目使用了这个插件 不得不说，用别人造的轮子是真的香，出于好奇，想用原生实现一下电子签名的功能 以下是实现过程 HTML和css可以参照源码，这里不过多介绍 首先引入eventBus，方便代码解耦 然后实现Base基类存放公共方法和属性，后续有啥共用属性或方法可以往这加 //基类：公共方法和属性 import event from './eventBus.js'
移动端touchend事件不触发解决方案
Jartto's Blog
06-25 2907
移动端touchend事件不触发，需要在touchstart中加入：1e.preventDefault(); 但是问题来了，阻止默认事件后，页面原先的滚动条也无法滚动了。 查阅了资料，在stackoverflow上得到如下解释： To workaround this bug you have to call preventDefault() on either the...
关于 小米平板 触摸事件响应不正常 ontouchend touchend
ljason1993的博客
12-14 456
把这快捷键设置关了。。。 心累。。。死活三指就bug。。。我服了
onmousemove、onmouseenter、onmouseover 使用不生效问题，只作用于内部文字
fred8的博客
03-15 3510
omnousemove、onmouseenter、onmouseover 使用不生效问题当我们在项目中使用鼠标事件问题解决方法建议 当我们在项目中使用鼠标事件 js document.querySelector("#father").addEventListener('mousemove',(event) => { console.log(1) }) css .father { width: 300px; height: 100px border: 1px solid red; } html
iOS避免使用手势不响应touch event的方法
vitoz的专栏
04-05 1932
最近一个应用需要侧滑用上了IIViewDeckController，发现原本一个靠touch event处理滑动的view没法正常工作了，响应侧滑去了。 （这里本来可以滑动取色）      第一反应，肯定是用了手势了（废话不用手势怎么实现侧滑），看了下代码用了PanGesture，好吧在我的这个view中也用上PanGesture手势把它的屏蔽掉，本来想应该正常了，试了一下发现还是不行，依
移动互联网终端的touch事件,touchstart, touchend, touchmove
weixin_30362233的博客
07-23 76
诸如智能手机和平板电脑一类的移动设备通常会有一个电容式触摸屏（capacitive touch-sensitive screen），以捕捉用户的手指所做的交互。随着移动网络的发展，其能够支持越来越复杂的应用，web开发者需要一种方法来处理这些事件。例如，几乎所 有的快节奏游戏都需要玩家一次按下多个按钮，这种方式，在触摸屏情况下，意味着多点触摸。Apple在iOS 2.0中引入了触摸事件API，An...
JavaScript: 让拖动支持iphone/ipad触摸
逆雪寒的天坑
12-21 1445
ios拖动 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, str
uniapp中touchstart、touchmove和touchend在H5中无法触发，可通过jQuery添相应事件代替
热门推荐
觉醒法师的专栏
03-08 2万+
uniapp中touchstart、touchmove和touchend在H5中无法触发，可通过jQuery添相应事件代替
深入了解iPad上的MouseEvent
weixin_30908649的博客
01-18 219
iPad上没有鼠标，所以手指在触发触摸事件（TouchEvent）的时候，系统也会产生出模拟的鼠标事件（MouseEvent）。 这对于普通网页的浏览需求而言，基本可以做到与PC端浏览器无明显差异。但是如果你正在做一款与用户有着强交互的WebAPP程序，比如一个html5小游戏或者图片处理工具什么的，那么依赖默认模拟恐怕不能满足产品的需求。 一个通常的建议是：在iPad上(或者...
移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法...
04-09 1251
这两天自己在写一个手机网页，用到了触屏滑动的特效，就是往右滑动的时候左侧隐藏的菜单从左边划出来。 做完之后在手机原生浏览器中运行正常，但在QQ和微信中打开，发现touchmove只会触发一次，而且touchend也经常不触发。 之后百度了一下这个问题，原因是 主要是由于200ms超时导致内核不一定会一直处理touchmove事件，一旦超时会将后续所有的事件转交给UI处理，导致tou...
apicolud 中touch事件没有效果相关
qq_25175063的博客
09-20 348
一、今天在apicolud上做一个移动端端的东西，需要用到touch事件。但是原生的touchstart和touchend都没有被触发。   二、于是乎各种查资料，文档。   三、结果嘞人家是用的 ontouchstart 和 ontouchend 事件触发的   四、只能说，好的吧............. 也欢迎登录我的个人网站，里面有更多的文章及技术咨询在等你：http://w...
js canvas触摸只触发touchstart事件不触发touchmove和touchend
最新发布
05-26
这种情况可能是因为你在...另外，需要注意的是，如果你在touchstart事件中使用了`event.preventDefault()`方法，那么在touchmove和touchend事件中也必须使用它来阻止默认行为，否则可能会出现一些奇怪的行为。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值