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 相关文章推荐
常见的jQuery选择器汇总
Nov 24 Javascript
JavaScript 变量、作用域及内存
Apr 08 Javascript
基于javascript实现单选及多选的向右和向左移动实例
Jul 25 Javascript
JS转换HTML转义符的方法
Aug 24 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
react-native fetch的具体使用方法
Nov 01 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
Dec 13 Javascript
详解Vue中的基本语法和常用指令
Jul 23 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
Jan 19 Javascript
6种JavaScript继承方式及优缺点(小结)
Feb 06 Javascript
vue 子组件watch监听不到prop的解决
Aug 09 Javascript
vue将文件/图片批量打包下载zip的教程
Oct 21 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
PHP与javascript对多项选择的处理
2006/10/09 PHP
第十二节 类的自动加载 [12]
2006/10/09 PHP
PHP IDE PHPStorm配置支持友好Laravel代码提示方法
2015/05/12 PHP
Symfony2创建页面实例详解
2016/03/18 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
提高javascript效率 一次判断,而不要次次判断
2012/03/30 Javascript
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
jquery实现点击消失的代码
2014/03/03 Javascript
jquery新的绑定事件机制on方法的使用方法
2014/04/15 Javascript
jquery实现勾选复选框触发事件给input赋值
2015/02/01 Javascript
js全选按钮的实现方法
2015/11/17 Javascript
ArtEditor富文本编辑器增加表单提交功能
2016/04/18 Javascript
Node.js Addons翻译(C/C++扩展)
2016/06/12 Javascript
使用BootStrap实现用户登录界面UI
2016/08/10 Javascript
浅谈JavaScript 数据属性和访问器属性
2016/09/01 Javascript
nodejs基础知识
2017/02/03 NodeJs
javascript中apply/call和bind的使用
2017/02/15 Javascript
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
vue修改Element的el-table样式的4种方法
2020/09/17 Javascript
vue中template的三种写法示例
2020/10/21 Javascript
Python单元测试框架unittest简明使用实例
2015/04/13 Python
python搜索指定目录的方法
2015/04/29 Python
Python获取央视节目单的实现代码
2015/07/25 Python
有趣的python小程序分享
2017/12/05 Python
Python+matplotlib实现填充螺旋实例
2018/01/15 Python
python查询mysql,返回json的实例
2018/03/26 Python
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
Python正则表达式和元字符详解
2018/11/29 Python
浅谈python累加求和+奇偶数求和_break_continue
2020/02/25 Python
Python爬取365好书中小说代码实例
2020/02/28 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
合作意向协议书范本
2014/03/31 职场文书
新闻学专业求职信
2014/07/28 职场文书
党员个人整改措施
2014/10/24 职场文书
群众路线教育实践活动学习笔记
2014/11/05 职场文书
Python+Selenium实现抖音、快手、B站、小红书、微视、百度好看视频、西瓜视频、微信视频号、搜狐视频、一点号、大风号、趣头条等短视频自动发布
2022/04/13 Python