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

缺乏、安全感 2022-01-06 01:53 576阅读 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 条评论，576人围观）

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

相关阅读

相关 swing jbutton实现长按和点击事件

import javax.swing.; import java.awt.event.ActionEvent; import java.awt.even

以你之姓@/ 2023年10月09日 17:28/ 0 赞/ 45 阅读

相关 Android 只保留长按事件,屏蔽点击事件

mIvBtn.setOnLongClickListener(new View.OnLongClickListener() { @Over

绝地灬酷狼/ 2023年10月03日 23:25/ 0 赞/ 8 阅读

相关 js移动端点击后延迟怎么办？

移动端页面对于点击事件会有300毫秒的延迟，也就是js捕获click事件的回调函数处理，需要300ms后才生效，导致多数用户感觉移动设备上基于HTML的web英语解密响应速度慢

深碍√TFBOYSˉ_/ 2023年06月18日 14:56/ 0 赞/ 11 阅读

相关 vue 长按离开屏幕事件

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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