PS:在开发中常常会有长按事件的需求,这里我简单的介绍几种长按事件的需求

需求一:长按数字累加或者累减

HTML:

<div class="mui-numbox" data-numbox-step='10' data-numbox-min='0' data-numbox-max='100'>
     <button class="mui-btn mui-numbox-btn-minus" type="button"@touchstart="Loop_Sub(item.CartID)" @touchend="clearLoop()">-</button>
     <input class="mui-numbox-input" type="number" :value="item.Cart_Nums"/>
     <button class="mui-btn mui-numbox-btn-plus" type="button" @touchstart="Loop_Add(item.CartID)" @touchend="clearLoop()">+</button>
</div>

JS:

var vm = new Vue({
  el: "#vue-container",
   data:{
    Loop:null
  },
  methods:{//长按添加数量
    Loop_Add:function(ID){
      //设置数量
      clearInterval(vm.Loop);//再次清空定时器,防止重复注册定时器
      $target=$(event.target).parent().find('input');
      vm.Loop=setInterval(function(){
      $num=$target.val();
      $target.val(parseInt($num)+1);
      },100);
    },
    //长按减少数量   Loop_Sub:function(ID){
      //设置数量
      clearInterval(vm.Loop);//再次清空定时器,防止重复注册定时器
      $target=$(event.target).parent().find('input');
      vm.Loop=setInterval(function(){
        $num=$target.val();
        if($num>0){
          $target.val(parseInt($num)-1);
        }else{
          clearInterval(vm.Loop);
        }   //改变点击数
      },100);
    },
    clearLoop:function(){
      clearInterval(vm.Loop);
    }
  }
})

这个Demo是在移动端测试的,因此使用的是touch事件。方法很简单,touchstart的时候去注册个Interval定时器,touchend的时候再把定时器清除掉,这样就能实现长按持续累加或者累减的效果。

需求二:长按延时事件触发

这类需求也比较简单,和需求一类似。这里拿需求一举例,只需在touchstart添加setTimeout计时器延时事件执行,touchend清除计时器即可。

VUE长按事件的更多相关文章

  1. 移动端H5长按事件 vue自定义指令

    import Vue from 'vue' Vue.directive('longpress', function (el, binding){ var timer = null; var start ...

  2. Android系统中自定义按键的短按、双击、长按事件

    在项目中碰到这样的问题: 由于系统中的按键在底层做了重新定义或者新增了按键,此时需要在APP层对按键事件(keyevent)做分解处理,模拟Android系统做法,把keyevent分解成: 1.单击 ...

  3. vue for 绑定事件

    vue for 绑定事件 <div id="pro_list" v-for="item in pro_list"> <div class=&q ...

  4. 长按事件jquery mobile

    chat_enlarge.addEventListener('touchend', function(event) { if(fingers == 1){ event.preventDefault() ...

  5. Android RecyclerView单击、长按事件:基于OnItemTouchListener +GestureDetector标准实现(二),封装抽取成通用工具类

     Android RecyclerView单击.长按事件:基于OnItemTouchListener +GestureDetector标准实现(二),封装抽取成通用工具类 我写的附录文章2,介绍了 ...

  6. Android RecyclerView单击、长按事件标准实现:基于OnItemTouchListener + GestureDetector

     Android RecyclerView单击.长按事件:基于OnItemTouchListener + GestureDetector标准实现 Android RecyclerView虽然拥有L ...

  7. webview长按事件js监听

    做app开发时,用到了webview,需要监听webview的长按事件,使用原生的js处理监听如下: ; //定时器 //开始按 function gtouchstart() { timeOutEve ...

  8. Vue方法与事件

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson10 一 vue方法实现 <!DOCTYPE html> ...

  9. 为 UIButton 添加长按事件

    UIButton *aBtn=[UIButtonbuttonWithType:UIButtonTypeCustom]; [aBtn setFrame:CGRectMake(40, 100, 60, 6 ...

随机推荐

  1. GUI记事本+切换面板1.1版

    package com.niit.javagui; import java.awt.Color; import java.awt.MenuBar; import java.awt.event.Inpu ...

  2. 201521123087《Java程序设计》 第八周学习总结

    1. 本周学习总结 2. 书面作业 本次作业题集集合 List中指定元素的删除(题目4-1)1.1 实验总结                                               ...

  3. 201521123011 《java程序设计》 第9周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己 ...

  4. 201521123080《Java程序设计》第14周学习总结

    本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 书面作业 MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自己的学号.姓名) ...

  5. 201521123087《Java程序设计》第14周学习总结

    1. 本周学习总结 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自己的学号.姓名)在自己建立的数据库上执行常见SQL语句(截图)-参考 ...

  6. Extjs整合CKEditor富文本编辑器插件

    CKEditor插件官方下载地址: http://ckeditor.com/download/releases 我使用的版本是 ExtJS5.1.0  CKEditor4.4.8 参考文章: http ...

  7. JVM菜鸟进阶高手之路一(一次与笨神,阿飞近距离接触修改JVM)

    转载请注明原创出处,谢谢! 今天在JVMPocket群里面看见,阿牛发了一个gc截图,之后ak47截图了特别恐怖,我就觉得好奇,去看看服务情况,截图日志如下 关于jstat命令详情可以参考:https ...

  8. uvalive 7500 Boxes and Balls

    https://vjudge.net/problem/UVALive-7500 题意: 找到规律之后发现给出一个数n,要求找到1 + 2i + ... + x <= n,找出1到x的和. 思路: ...

  9. Quartz源码——scheduler.start()启动源码分析(二)

    scheduler.start()是Quartz的启动方式!下面进行分析,方便自己查看! 我都是分析的jobStore 方式为jdbc的SimpleTrigger!RAM的方式类似分析方式! Quar ...

  10. 实例讲解webpack的基本使用第二篇

    这一篇来讲解一下如何设置webpack的配置文件webpack.config.js 我们新建一个webpack-demo的项目文件夹,然后安装webpack 执行如下命令 在项目文件夹下,建一个dis ...