实现图片手动轮播时touchstart事件无法触发

最新推荐文章于 2024-01-02 16:01:39 发布
最新推荐文章于 2024-01-02 16:01:39 发布
阅读量641 收藏
点赞数 1
文章标签： 移动web touch事件 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010328533/article/details/100135073
版权

制作移动端轮播图时遇到的小问题

项目过程中会遇到一些小bug

实现手动轮播时touchstart事件无法触发

  写完一个自动轮播事件之后完成手动轮播事件，发现touchstart事件无法触发，解决思路：
  1.触发touchstart事件时先关闭定时器，停止自动轮播
  2.强制刷新页面，如果还是不能实现效果，则排除定时器问题
  3.在touchstart事件下面console.log（）一下，看是否可以打印，打印不出来就是touchstart事件没有被触发
  重点来了：
          **touch事件触发需要一个前提条件，就是必须保证元素具有宽和高**
图拉呀
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS中touchstart事件与click事件冲突的解决方法
10-18
主要给大家介绍了关于JS中touchstart事件与click事件冲突的解决方法，文中通过示例代码将解决的方法介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
HTML5触摸事件(touchstart、touchmove和touchend)的实现
11-20
今天为大家介绍的事件主要是触摸事件：touchstart、touchmove和touchend。 一开始触摸事件touchstart、touchmove和touchend是iOS版Safari浏览器为了向开发人员传达一些信息新添加的事件。因为iOs设备既没有鼠标也...
Vue中使用touchstart、touchmove、touchend与click冲突
weixin_42677904的博客
04-11 6055
今天做项目，突然发现了这个问题。就是在移动端，一个元素既注册有滑动事件，又注册有点击事件时就会出现一些问题。 比如我就不知道滑动事件的优先级是大于点击事件的，而当我们只想执行点击事件而不想触发滑动时间时，就必须做个处理 事件执行顺序： touchstart →touchmove →touchend→click 所以当我们执行点击事件时，其实在执行点击事件之前，就已经执行了滑动事件了。如果滑动事件的逻辑和点击事件的逻辑不一样，这样就会出现问题。 上网找了很久终于找到一个方法,就是通过活动距离来判断，当滑动距
首次加载页面时，Android Chrome上永远不会触发Touchstart事件
liuliuhelingdao的博客
06-22 435
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
vue epub.js使用touchstart事件没有反应
qq_43608208的博客
08-10 805
epub的touchstart事件没反应
Vue下 touchstart touchend 事件无效失效解决办法
bydongxin的博客
12-15 8056
Vue下 touchstart touchend 事件无效失效解决办法 <van-button :disabled="isLoading" plain type="info" @touchstart.native.prevent="touchstart" @touchend.native.prevent="touchend" style="width:40%;height: 40
cocos creator Node.EventType.TOUCH_START点击没反应
coloma2012的博客
09-30 361
Node.EventType.TOUCH_START 对子node没有反应，该事件处于父node事件作用范围之内，使用父级绑定的事件。如果子node的UITransform处于父级node的UITransform图像覆盖范围之内，则。
uniapp中touchstart、touchmove和touchend在H5中无法触发，可通过jQuery添相应事件代替
热门推荐
觉醒法师的专栏
03-08 2万+
uniapp中touchstart、touchmove和touchend在H5中无法触发，可通过jQuery添相应事件代替
解决vue的touchStart事件及click事件冲突问题
10-15
主要介绍了解决vue的touchStart事件及click事件冲突问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
uniapp中@touchstart，@touchmove，@touchend在微信浏览器上面会失效的解决办法
最新发布
qq_51035159的博客
01-02 2691
【代码】uniapp中@touchstart，@touchmove，@touchend在微信浏览器上面会失效的解决办法。
移动端touchstar、touchmove、touchend 事件如果页面有滚动时不让触发 touchend 事件。
u011927449的博客
07-13 556
/*仅适用于内容中点击元素。对于拖动等元素，需要自行在页面处理。 * 主要是绑定touchstart和touchmove事件，并判断用户按下之后手指移动了多少像素。 * 如果手指移动距离小于10像素，则还是认为用户在做点击操作。如果移动距离超过了10像素，则取消后续事件监听函数的执行。*/ <script type="text/javascript"> function makeTouchableButton(ele) { if (!ele) { .
vue h5页面 解决touchstart，touchmove，touchend，click事件触发产生的问题
maoyuanh的博客
02-15 4005
我的思路是，触发touchstart方法的时候延迟200毫秒如果是就是触摸事件，否则在touchend里面判断就是点击十点，调用点击事件的方法即可。当你的需要即要求可以完成触摸事件，又要求有点击事件的时候，我们要搞清楚一个问题，事件触发的排序问题。
Vue 中 touch 事件无效解决方案
Ryan的博客
03-30 3533
添加 .native.prevent 修饰符即可 <van-button round @touchstart.native.prevent="onTouchStart" @touchmove.native.prevent="onTouchMove" @touchend.native.prevent="onTouchEnd" > Hold to Talk </van-button>
解决@touchstart和@click事件触发冲突问题,可使@touchstart和@click分别执行
weixin_42479305的博客
11-08 5775
只用在@click加stop，且在onTouchMove上添加阻止点击事件触发——e.preventDefault();即可完成拖动事件@touchstart和点击事件@click分别执行功能，且可以修复拖动按钮时会导致页面滚动问题。@touchstart不加修饰符,在onTouchStart点击事件中触发阻止click事件。如果需要阻止点击事件不触发，只触发@touchstart;事件，比如拖拽事件同时添加返回上一页功能;一般出现在我们给某个元素同时绑定。
IOS微信端touchstart事件失效处理
qq_38847917的博客
09-19 3284
IOS微信端touchstart（长按）事件失效，点击的时候还总是弹出检索条 *{ -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-selec...
ios手机 苹果手机 在小程序里面长按图片 后 点击事件失效问题
酱子
11-24 910
问题：ios手机 苹果手机 在小程序里面长按图片后，图片悬浮，然后点击事件都失效的问题。 解决办法：在img标签里使用 css属性 -webkit-touch-callout: none;
threejs在手机端的touchmove失效。
A13330069275的博客
11-23 2515
这里是在知乎上找到的回答： 首先要确定下你的需求具体是什么样的， 是要监听整个场景的touchmove事件，还是要操作三维模型 如果是整个场景的话： 1.可以在事件捕获阶段拿到事件的target DOM.addEventListener( 'touchmove', function(e){ console.log(e) }, true ); //第三个参数为true 2...
解决谷歌浏览器中touchstart不管用的方法
TE杨
04-28 2781
原因：https://zhuanlan.zhihu.com/p/24385322 解决方法: document.addEventListener('touchstart', function(event) { // 判断默认行为是否可以被禁用 if (event.cancelable) { // 判断默认行为是否已经被禁用 if (!event.de...
移动端拖拽的时候不触发点击事件
一点点ning0_o
09-01 4670
var isClick = true; $('li').on('touchstart', function(e){ console.log($(this)); isClick = true; }); $('li').on('touchmove', function(e){ isClick = false; }); $('li').on('touchend', function(e
js canvas触摸只触发touchstart事件不触发touchmove和touchend
05-26
这种情况可能是因为你在touchstart事件中使用了`event.preventDefault()`方法，阻止了默认的touch事件。如果你想要使canvas支持触摸事件，可以在touchstart事件中添加以下代码： ``` canvas.addEventListener('touchmove', function(event) { event.preventDefault(); // 在这里处理touchmove事件 }); canvas.addEventListener('touchend', function(event) { event.preventDefault(); // 在这里处理touchend事件 }); ``` 这样就可以在canvas上支持触摸事件了。另外，需要注意的是，如果你在touchstart事件中使用了`event.preventDefault()`方法，那么在touchmove和touchend事件中也必须使用它来阻止默认行为，否则可能会出现一些奇怪的行为。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值