广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue长按事件和点击事件冲突的解决
  • 313
分享到

vue长按事件和点击事件冲突的解决

vue长按事件vue点击事件长按和点击事件冲突 2022-11-13 18:11:38 313人浏览 泡泡鱼
摘要

目录长按事件和点击事件冲突的解决使用场景具体需求代码说明Vue WEB端长按事件,解决和click冲突长按事件和点击事件冲突的解决 使用场景 在使用vue做移动端开发时,遇到了长按事

长按事件和点击事件冲突的解决

使用场景

在使用vue做移动端开发时,遇到了长按事件和点击事件冲突的问题。

具体需求

点击标签时选中标签,再次点击时取消选择,因标签名称过长,长按标签使用tooltip显示完整标签名称。

代码说明

长按是用touchstart事件和touchend事件来实现的。在touchstart事件里使用setTimeout,时间设置为长按生效的时间就可以了,下面上代码。

HTML部分

关于这里的.prevent修饰符,是用来阻止默认动作。但这里我试过,不加在电脑端运行时会有异常,手机端没有影响,最好还是加上吧。

    <div v-for="(item, index) in List" class="flex a-center j-center" >
           <van-tag   v-if="!item.selected"
           @touchstart.prevent="GoTouch(item.name)"  
           @touchend.prevent="outTouch(index)"
            >
            <span >{{ item.name }}</span>
            </van-tag>
        
            <van-tag v-if="item.selected"   color="blue" 
             @touchstart.prevent="goTouch(item.name)"
             @touchend.prevent="outTouch(index)" 
             >
            <span>{{ item.name }}</span>
            </van-tag>
    </div>

JS部分

当点击标签时,timer的值不为0,执行单次点击事件,长按一秒时将timer设置为0,则只执行长按事件。这样就解决了长按事件和点击事件的冲突。

data(){
 return{
 timer:0
 }
},
methods:{
//touchstart 事件
goTouch(v) {
      this.timer = setTimeout(() => {
        this.timer = 0
        //执行长按事件
      }, 1000);
      return false
 },
 
 //touchend事件
    outTouch(index) {
      clearTimeout(this.timer);
      if(this.timer!=0){
      //执行单次点击事件
      }
      return false
 }
}

vue web端长按事件,解决和click冲突

  <div
          class="main_content"
          @mousedown="loopZoom()"
          @mouseup="clearLoopZoom()"
          @click="handlerZoom()"
        >
          测试长按
        </div>
   handlerZoom() {
        if (this.flag) {
          console.log('执行click事件')
        }
        this.flag = false
    },
    loopZoom() {
      console.log("长按开始咯")
      this.firstTime = new Date().getTime()
      this.timeOut = setTimeout(() => {
      console.log("长按事件")
      }, 800);
    },
    clearLoopZoom() {
      console.log("长按结束咯")
      this.lastTime=new Date().getTime()
      if (this.lastTime - this.firstTime < 100) {
          this.flag=true
        }
      clearTimeout(this.timeOut);
      this.timeOut = "";
      clearInterval(this.setIntervals);
      this.setIntervals = "";
    },

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue长按事件和点击事件冲突的解决

本文链接: https://www.lsjlt.com/news/169993.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作