VUE长按事件需求详解


Posted in Javascript onOctober 18, 2017

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

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

VUE长按事件需求详解

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清除计时器即可。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js获取单选框或复选框值及操作
Dec 18 Javascript
JavaScript 七大技巧(一)
Dec 13 Javascript
动态创建按钮的JavaScript代码
Jan 29 Javascript
Bootstrap 布局组件(全)
Jul 18 Javascript
带你了解session和cookie作用原理区别和用法
Aug 14 Javascript
以v-model与promise两种方式实现vue弹窗组件
May 21 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
Jun 28 Javascript
Vue 3.0双向绑定原理的实现方法
Oct 23 Javascript
js实现图片无缝循环轮播
Oct 28 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
May 09 Javascript
vue addRoutes路由动态加载操作
Aug 04 Javascript
js实现淘宝浏览商品放大镜功能
Oct 28 Javascript
vue router仿天猫底部导航栏功能
Oct 18 #Javascript
Node做中转服务器转发接口
Oct 18 #Javascript
Vue组件之Tooltip的示例代码
Oct 18 #Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 #Javascript
详解vue项目首页加载速度优化
Oct 18 #Javascript
JS简单实现滑动加载数据的方法示例
Oct 18 #Javascript
详解cordova打包成webapp的方法
Oct 18 #Javascript
You might like
Discuz! Passport 通行证整合
2008/03/27 PHP
php链表用法实例分析
2015/07/09 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
浅谈PHP错误类型及屏蔽方法
2017/05/27 PHP
详解php中的implements 使用
2017/06/13 PHP
javascript 兼容鼠标滚轮事件
2009/04/07 Javascript
jQuery学习2 选择器的使用说明
2010/02/07 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
2013/06/09 Javascript
JS日期和时间选择控件升级版(自写)
2013/08/02 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
2013/11/15 Javascript
js向上无缝滚动,网站公告效果 具体代码
2013/11/18 Javascript
js实现按钮加背景图片常用方法
2014/11/01 Javascript
angularJS提交表单(form)
2015/02/09 Javascript
JavaScript中的Math.LOG2E属性使用详解
2015/06/14 Javascript
浅谈JavaScript 标准对象
2016/06/02 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
如何解决vue与传统jquery插件冲突
2017/03/20 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
node.js命令行教程图文详解
2019/05/27 Javascript
微信小程序点餐系统开发常见问题汇总
2019/08/06 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
2020/07/16 Javascript
python中map()与zip()操作方法
2016/02/27 Python
利用Python-iGraph如何绘制贴吧/微博的好友关系图详解
2017/11/02 Python
pytorch中使用cuda扩展的实现示例
2020/02/12 Python
使用纯HTML5编写一款网页上的时钟的代码分享
2015/11/16 HTML / CSS
俄罗斯和世界各地的酒店预订:Hotels.com俄罗斯
2016/08/19 全球购物
个人找工作的自我评价
2013/10/17 职场文书
业务部门经理岗位职责
2014/02/23 职场文书
葛优非诚勿扰搞笑征婚台词
2014/03/17 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
教师党员批评与自我批评
2014/10/15 职场文书
2014年物业管理工作总结
2014/11/21 职场文书
环境卫生整治简报
2015/07/20 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书
周一早安温馨问候祝福语!
2019/07/15 职场文书
MySQL Server 层四个日志
2022/03/31 MySQL