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 相关文章推荐
ajax异步刷新实现更新数据库
Dec 03 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
Feb 05 Javascript
JavaScript DOM节点添加示例
Jul 16 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
Jan 30 Javascript
JS实现光滑展开合拢的菜单效果代码
Sep 16 Javascript
用js实现放大镜的效果的简单实例
May 23 Javascript
bootstrap中模态框、模态框的属性实例详解
Feb 17 Javascript
vue项目中导入swiper插件的方法
Jan 30 Javascript
vue 实现剪裁图片并上传服务器功能
Mar 01 Javascript
vue-cli的工程模板与构建工具详解
Sep 27 Javascript
vue实现微信获取用户信息的方法
Mar 21 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
Aug 08 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
phpmyadmin操作流程
2006/10/09 PHP
PHP 多进程 解决难题
2009/06/22 PHP
PHP通过session id 实现session共享和登录验证的代码
2012/06/03 PHP
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
jquery 模拟类搜索框自动完成搜索提示功能(改进)
2010/05/24 Javascript
基于jquery的划词搜索实现(备忘)
2010/09/14 Javascript
用js实现小球的自由移动代码
2013/04/22 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
2013/07/03 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
js实现省份下拉菜单效果
2017/02/15 Javascript
微信小程序中子页面向父页面传值实例详解
2017/03/20 Javascript
使用nodejs爬取前程无忧前端技能排行
2017/05/06 NodeJs
webpack打包html里面img后src为“[object Module]”问题
2019/12/22 Javascript
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
python批量修改图片大小的方法
2018/07/24 Python
python 实现倒排索引的方法
2018/12/25 Python
Python 画出来六维图
2019/07/26 Python
对pytorch中的梯度更新方法详解
2019/08/20 Python
pycharm显示远程图片的实现
2019/11/04 Python
Python基础之字符串操作常用函数集合
2020/02/09 Python
解决Tensorboard 不显示计算图graph的问题
2020/02/15 Python
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
AmazeUI导航的示例代码
2020/08/14 HTML / CSS
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
土木工程专业大学毕业生求职信
2013/10/13 职场文书
公司领导推荐信
2013/11/12 职场文书
婚假请假条怎么写
2014/04/10 职场文书
法制宣传日活动总结
2014/04/29 职场文书
土建专业毕业生自荐书
2014/07/04 职场文书
保留意见审计报告
2015/06/05 职场文书
水知道答案观后感
2015/06/08 职场文书
考试后的感想
2015/08/07 职场文书
六一儿童节致辞稿(3篇)
2019/07/11 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书
详解Python+OpenCV绘制灰度直方图
2022/03/22 Python
Python中tqdm的使用和例子
2022/09/23 Python