vue在移动端点击，滑动，长按的事件判断

缺乏、安全感 2022-01-06 01:53 559阅读 0赞

思路：

1）调用js的touch的API接口分别监听touchstart,touchmove,touchend事件

2）使用计时器可以设定时间用于区分长按和点击

<template>
      <div class="about">
        <p @touchstart="start" @touchmove="move" @touchend="end">
          this is a picture
        </p>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          longClick: 0,
          timeOutEvent: 0
        };
      },
      methods: {
        start() {
          var that = this;
          this.longClick = 0;
          this.timeOutEvent = setTimeout(function() {
            that.longClick = 1;
            console.log("这是长按")
          }, 500);
        },
        move(e) {
          clearTimeout(this.timeOutEvent);
          this.timeOutEvent = 0;
          e.preventDefault();
          console.log("这是滑动")
        },
        end() {
          clearTimeout(this.timeOutEvent);
          if (this.timeOutEvent != 0 && this.longClick == 0) {
            //点击
            //此处为点击事件----在此处添加跳转详情页
            console.log("这是点击");
          }
          return false;
        }
      }
    };
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，559人围观）

还没有评论，来说两句吧...

相关阅读

相关取消tabbar中a标签在移动端点击时的蓝色

今天做移动端项目遇到一个点击出现的背景色 , 如下图 : 鼠标点击首页时出现了一个蓝色背景 ![a链接点击背景色][a] 尝试很多办法无果后 , 去找大爱的度娘问了一

快来打我*/ 2023年06月18日 13:52/ 0 赞/ 4 阅读

相关 creator 长按事件

在creator中使用长按 / bw 长按事件 node: 只能是节点 call: 长按触发的事件

心已赠人/ 2023年01月03日 04:59/ 0 赞/ 239 阅读

相关 html 长按事件坐标,HTML5-长按事件

长按我 var timeOutEvent=0; $(function()\{ $("\touchArea").on(\{ touchstart: function(e)

深藏阁楼爱情的钟/ 2022年10月06日 10:58/ 0 赞/ 250 阅读

相关 vue 长按离开屏幕事件

vue长按事件touch 2018年02月02日 17:16:09 阅读数：3621 1.touch事件以下是四种touch事件 touchstart:

淩亂°似流年/ 2022年05月16日 13:35/ 0 赞/ 224 阅读

相关移动端点击元素出现闪烁

移动端点击元素出现闪烁再点击元素时会出现黑色背景的闪烁，解决只需要将此元素的css中添加 -webkit-tap-highlight-color:tra

忘是亡心i/ 2022年04月23日 13:26/ 0 赞/ 267 阅读

相关 vue中移动端网页自定义触屏事件，点击、滑动、左滑、右滑、下滑、上滑、长按事件

事件主要是监听touchstart、touchend与touchmove事件，事件这样可以获取用户触屏结束后的位置，这样就可以计算出用户在屏幕上滑动的方向 v-

水深无声/ 2022年03月25日 02:36/ 0 赞/ 2421 阅读

相关 vue在移动端点击，滑动，长按的事件判断

思路： 1）调用js的touch的API接口分别监听touchstart,touchmove,touchend事件 2）使用计时器可以设定时间用于区分长按和点击

缺乏、安全感/ 2022年01月06日 01:53/ 0 赞/ 560 阅读

相关移动端点击事件延迟300ms解决方式

说明：移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效。以下是历史原因，来源一个公司内一个同事的分享： 2007年苹果发布首款iphone

系统管理员/ 2021年09月16日 18:14/ 0 赞/ 359 阅读

相关 react、vue - 解决移动端点击事件300毫秒延迟问题（fastclick.js）

从点击屏幕上的元素到触发元素的点击（click）事件的过程中，移动端浏览器大约有300毫秒的等待时间，主要是想看后面是否还会再做点击操作（是否要进行双击操作）,而fastc

淡淡的烟草味﹌/ 2021年08月13日 23:55/ 0 赞/ 482 阅读

相关点击可移动/滑动栏(Vue)

1、安装 cnpm install -S ly-tab 2、注册 import Vue from 'vue'; impo

我不是女神ヾ/ 2021年07月25日 02:36/ 0 赞/ 399 阅读