美文网首页
vue移动端长按事件

vue移动端长按事件

作者: OnceWhite | 来源:发表于2018-06-27 15:31 被阅读296次
  • 代码
var timeOutEvent=0;//定时器  

// html
<div @touchstart="gotouchstart" @touchmove="gotouchmove" @touchend="gotouchend"></div>

//js
gotouchstart(){
   let that = this;
   clearTimeout(timeOutEvent);//清除定时器
   timeOutEvent = 0;
   timeOutEvent = setTimeout(function(){
        //执行长按要执行的内容,
      ...
     },600);//这里设置定时
 },
      //手释放,如果在500毫秒内就释放,则取消长按事件,此时可以执行onclick应该执行的事件
gotouchend(){
    clearTimeout(timeOutEvent);
      if(timeOutEvent!=0){
        //这里写要执行的内容(尤如onclick事件)
     }
},
//如果手指有移动,则取消所有事件,此时说明用户只是要移动而不是长按 
gotouchmove(){
     clearTimeout(timeOutEvent);//清除定时器
     timeOutEvent = 0;
},

相关文章

  • vue移动端长按事件

    代码

  • Vue移动端长按事件

    页面布局如下: 说明:因为这里是长按一张指纹图片,移动端长按图片会提示“保存图片”,虽然不影响跳转,但是会误导用户...

  • Vue移动端触摸事件

    其实就是一个TouchEvent对象+上Vue的自定义事件,实现移动端的上滑、下滑、左滑、右滑,长按、点击 组件 ...

  • 移动端------移动事件对

    在移动端,用户每时每刻都在触发移动事件,比如触摸的事件,点击,长按,左右滑动的事件,手指缩放,等等。都是移动事件的...

  • 移动端

    原生事件 因为click有300ms的延迟(用于判断是否长按),所以不建议在移动端使用click。移动端事件,主要...

  • Vue 移动端的长按与触摸事件

    Vue 移动端的长按与触摸事件 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有...

  • 移动端H5模拟长按行为

    需求: 点击编辑, 长按删除 环境: 移动端H5 思路: 使用touchstart事件 +touchend事件 +...

  • 模拟移动端长按事件

    代码 调用:

  • Js实现移动端长按事件

    前言 最近在做一个移动端的项目,其中有一个收藏列表,其中包含几个事件。1.点击跳转详情页。2.长按显示遮罩层和删除...

  • 关于移动端的长按事件

    1.关于长按这个操作,我们需要借助三个事件: onTouchStart:开始 touch 页面的某个DOM元素; ...

网友评论

      本文标题:vue移动端长按事件

      本文链接:https://www.haomeiwen.com/subject/apnbyftx.html