vue项目中@touchstart绑定的点击事件点击穿透的解决

最新推荐文章于 2024-03-20 16:04:32 发布
最新推荐文章于 2024-03-20 16:04:32 发布
阅读量2.4k 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43366084/article/details/109607798
版权

在vue项目练习时，在一个详情页通过@touchstart绑定了一个点击返回按钮，通过history.back进行返回。
但是，bug出现了，点击事件似乎并不是只执行了一次，而是在返回之后的页面又一次的进行了点击，导致效果出现极大偏差。

原来代码是这样的：

methods: {
   
    handleToBack () {
   
        history.back()  
    }
  }

最终通过定时器给点击事件一个延迟：

handleToBack (
最低0.47元/天 解锁文章
不要讲废话
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 中 使用touchstart ，touchmove，touchend事件
m0_45043105的博客
11-22 4381
<template> <div id="SlideBar" class="box"> <div class="item" ref="slide" :style="slideStyle" @touchstart="start($event)" @touchmove="move($event)" @touchend="end($event)"&gt...
touchstart事件和click事件分开执行
weixin_60020621的博客
05-09 436
插件用了@touchstart @touchmove @touchend事件，后来又加了点击相册，查看大图的功能。但@touchstart和@click一起用的话，只会执行@touchstart。然后发现@touchstart事件只是在点击时起到一个类似稍微放大的功能，告诉用户可以拖动图片。而且既能拖动换位，又能查看大图。最终，删除@touchstart， 使用@longpress继承@touchstart稍微放大的功能，并且在开头添加。uniapp项目中相册功能，要能拖动换位，所以用了插件。
在Uni-app中，你可以使用@touchstart、@touchmove和@touchend等触摸事件来实现元素的拖拽功能。以下是一个使用Uni-app语法的示例：
蓝斑.json的博客
06-28 7542
请注意，在Uni-app中直接操作DOM可能不是最佳实践，你可以结合使用Vue的数据绑定和样式绑定来替代直接操作DOM的方式，以更好地利用Uni-app的特性。等触摸事件来实现元素的拖拽功能。在触摸移动过程中，通过计算触摸点的偏移量，设置元素的平移变换（）实现元素的跟随手指移动。最后，在触摸结束时，重置拖拽标志位（当触摸开始时，记录初始触摸点的位置，设定拖拽开始的标志位（如果你还有任何问题，请随时提问。触摸事件，并定义了对应的处理方法。在Uni-app中，你可以使用。在上述示例中，我使用了。
对vue中的事件穿透与禁止穿透实例详解
10-16
今天小编就为大家分享一篇对vue中的事件穿透与禁止穿透实例详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决@touchstart和@click事件触发冲突问题,可使@touchstart和@click分别执行
weixin_42479305的博客
11-08 5971
只用在@click加stop，且在onTouchMove上添加阻止点击事件触发——e.preventDefault();即可完成拖动事件@touchstart和点击事件@click分别执行功能，且可以修复拖动按钮时会导致页面滚动问题。@touchstart不加修饰符,在onTouchStart点击事件中触发阻止click事件。如果需要阻止点击事件不触发，只触发@touchstart;事件，比如拖拽事件同时添加返回上一页功能;一般出现在我们给某个元素同时绑定。
@click @touchstart 触发事件问题
nihaokangzheng的博客
07-07 888
vue项目一个组件, 在正常浏览器模式下, 能够触发点击事件, 但是在手机端(浏览器模拟手机端), 触发了touchstart事件, 没哟触发click事件,这里touchstart是准备移动这个组件,那么如何实现既能移动组件, 也能完成点击事件呢?两个事件中获取偏移量, 如果x, y 轴偏移都为0 则触发click方法。
移动端浏览器触摸事件@touchstart=“touchstart“ @touchend=“touchend“ @touchmove=“touchmove“
qq_37734787的博客
09-12 1553
touchstart 触摸开始，多点触控，后面的手指同样会触发 touchmove 接触点改变，滑动时 touchend 触摸结束，手指离开屏幕时
uniapp中@touchstart，@touchmove，@touchend在微信浏览器上面会失效的解决办法
qq_51035159的博客
01-02 2970
【代码】uniapp中@touchstart，@touchmove，@touchend在微信浏览器上面会失效的解决办法。
解决vue的touchStart事件及click事件冲突问题
10-15
主要介绍了解决vue的touchStart事件及click事件冲突问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue 绑定对象内点击事件失效问题
10-18
今天小编就为大家分享一篇解决vue 绑定对象内点击事件失效问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 项目引入echarts 添加点击事件操作
10-14
本文将详细介绍如何在Vue项目中引入ECharts以及如何添加点击事件操作。 首先，为了全局使用ECharts，我们需要在`main.js`文件中导入ECharts库。这可以通过以下代码完成： ```javascript import echarts from '...
uniapp滑动事件
m0_73481765的博客
09-15 3491
通过以上方式，你可以在Uniapp中监听滑动事件，并在事件处理方法中编写相应的逻辑实现滑动效果。你可以根据具体需求使用事件对象中的属性和方法来获取触摸点的信息，从而实现自定义的滑动交互。在组件的模板文件中，你可以使用这些事件来监听滑动操作。等事件来监听滑动操作。：当手指在屏幕上滑动时触发该事件。：当手指离开屏幕时触发该事件。：当手指触摸屏幕时触发该事件。属性获取到滑动过程中的触摸点信息。属性获取到最后一个触摸点的信息。在Uniapp中，可以通过。属性获取到触摸点的信息。
uniapp的touchstart与click
qq_46490956的博客
12-29 1175
当使用@touchstart.prevent的时候不会触发click事件，但正常点击事件也不生效了。在函数里使用e.preventDefault()也不生效，最后看到一篇文章用变量判断，所以最后决定使用变量判断。当使用@touchstart.stop的时候不生效。点击事件正常触发，触摸事件正常触发，不会互相影响。问题：再执行删除操作的时候会连带点击事件一起执行。需求：点击消息查看详情，长按消息执行删除操作。
在 UniApp 中，可以利用 @touchstart 和 @touchend 事件，结合 v-show 指令来实现手触摸时显示弹框，手离开时消失的功能。
chengchong_cc的博客
09-02 460
【代码】在 UniApp 中，可以利用 @touchstart 和 @touchend 事件，结合 v-show 指令来实现手触摸时显示弹框，手离开时消失的功能。
使用uniapp开发微信小程序在父元素使用@touchstart.stop、@touchmove.stop、@touchend.stop会导致子元素的@click事件无效
最新发布
weixin_53072048的博客
03-20 706
我被点了</view><view @click="onClick">我被点了
vue的touchStart事件及click事件冲突问题
热门推荐
梧桐芊羽的博客
09-14 2万+
一 问题： 今天遇到这样问题，给某个元素同事绑定touchStart及click事件后，若在移动设备上，当你点击时，会依次出发这两个事件。因为移动端的click事件触发是会延迟300ms，所以touchStart事件会先触发后再触发click事件。这样导致每次都要执行两次 ...
前端知识总结（三）
Ther_su的博客
09-08 763
51、启动GNU加速 硬件加速的工作原理 浏览器接收到一个页面之后，将html解析成DOM树，浏览器解析渲染「html」的过程 按着一定的规则执行，DOM树和CSS树结合后构成浏览器形成页面的 渲染树 ; 渲染树中包含大量的渲染元素，每一个元素会被分配到一个图层中，每个图层又会被加载到GPU形成渲染纹理，而图层在GPU中 transform 是不会触发 repaint 的，这一点非常类似3D绘图功能，最终这些使用 transform 的图层都会由独立的合成器进程进行处理。也正因为这个原因，避免了频繁 rep
【uniapp】监听触摸事件、禁止屏幕滚动
Minions_Fatman的博客
07-26 3788
禁止屏幕滚动</监听触摸事件 滑动事件手指滑动事件三个事件：@touchstart ：触摸开始；@touchmove：手指滑动的过程；@touchend：触摸结束，手指离开屏幕。
触摸事件中touchstar、touchmove、touchend、touchcancel事件应用方法及实例
weixin_34297300的博客
08-08 1443
触摸事件中touchstar、touchmove、touchend、touchcancel事件应用方法及实例 一、 分享到： 前面我们介绍过移动设备中一些设备事件，例如手机旋转90度、倾斜等设置放置姿态变化的四大事件orientationchange事件、MozOrientation事件、deviceorientation事件、devicemotion事件...
vue绑定点击事件@click
06-07
@click 是 Vue 中用于绑定点击事件的指令，可以在模板中绑定一个方法，当元素被点击时，会自动调用对应的方法。例如： ``` <button @click="handleClick">点击我 export default { methods: { ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值