Vue移动端长按触摸事件
.btn-long{宽度:200px;高度:30px;background-color:red;}Vue移动端长按触摸事件博客说明文中所涉及信息来源于网络及个人总结,旨在总结个人学习和经验。如有侵权,请联系我删除,谢谢!说明在手机端的需求难免会遇到手势相关的事件,比如div长按、点击事件。长按可进行分享或删除操作,一般以弹窗形式显示。其实实现主要是用到了dom,touchstart,touchmove,touchend代码点击
双击 script>exportdefault{name:'LongTouch',data(){return{//定时器循环:0,clickShow:false,longClickShow:false}},methods:{handlerTouchstart(){this.loop=setTimeout(()=>{this.loop=0//执行长按要执行的内容this.clickShow=falsethis.longClickShow=true},500)//定时时间返回false},handlerTouchmove(){//清除定时器clearTimeout(this.loop)this.loop=0},handlerTouchend(){//清除定时器clearTimeout(this.loop)if(this.loop!==0){//点击操作this.clickShow=truethis.longClickShow=false}}}}
.btn-long{宽度:200px;高度:30px;background-color:red;}Demo发现长按时会出现选中文字的效果,影响体验优化体验。给css加上样式,这样选中的效果就不会出现了。*{-webkit-touch-callout:无;-webkit-用户选择:无;-khtml-用户选择:无;-moz-用户选择:无;-ms-用户选择:无;:none;}感谢万能的网络和努力的自己,个人博客,GitHub测试,GitHub公众号-guizimo,小程序-小鬼博客