当前位置:   article > 正文

微信小程序长按和点击同时存在时,2个都会触发的问题_touchstart和tap同时触发

touchstart和tap同时触发

问题描述:

        在列表上实现长按弹框删除,点击进入详情页。在模拟器上正常,但在手机端,长按同时会触发点击。

        长按、点击触发顺序:

        点击:touchstart → touchend → tap
        长按 touchstart → longtap → touchend → tap

       点击和长按的差别:按住时间在350ms内算点击

最终代码:

wxml

  1. <view "bindlongtap="longclick" bindtap="click" bindtouchstart="bindTouchStart" bindtouchend="bindTouchEnd">
  2. </view>

js:

  1. longclick(e) {
  2. console.log('长按事件')
  3. },
  4. bindTouchStart(e) {
  5. this.startTime = e.timeStamp;
  6. },
  7. bindTouchEnd(e) {
  8. this.endTime = e.timeStamp;
  9. },
  10. click(e) {
  11. //检查锁,按住时间在350ms内算点击
  12. console.log('点击事件')
  13. if(this.endTime - this.startTime < 350) {
  14. //点击操作逻辑
  15. }
  16. }

最终效果

ps:

 微信小程序开发交流QQ群:897729103

 本人微信:649231659,承接软件开发&学习交流

 微信小程序学习视频:

(2022新-30节免费)60W用户微信小程序实战-吃透微信小程序开发-基础+高阶课程【共113课时】_其他课程-51CTO学堂(2022新-30节免费)60W用户微信小程序实战-吃透微信小程序开发-基础+高阶课程,其他,通过一个真实的60w用户小程序实战,掌握微信小程序前端编码,高阶API使用,前后端对接方式,51CTO学堂为您提供全面的视频课程和专项解答,it人充电,就上51CTO学堂icon-default.png?t=M276https://edu.51cto.com/course/30086.html微信小程序-WebSocket(Workerman-PHP)即时通讯 点对点、多人聊天室【共21课时】_JavaScript课程-51CTO学堂微信小程序-WebSocket(Workerman-PHP)即时通讯 点对点、多人聊天室,JavaScript,从0开发点对点聊天、多人聊天室(Workerman-PHP),项目部署至linux设置WSS协议,51CTO学堂为您提供全面的视频课程和专项解答,it人充电,就上51CTO学堂icon-default.png?t=M276https://edu.51cto.com/course/29806.html从购买服务器(秒杀)配置宝塔LAMP环境(域名解析、免费SSL申请)Linux常用命令解析【共15课时】_PHP课程-51CTO学堂从购买服务器(秒杀)配置宝塔LAMP环境(域名解析、免费SSL申请)Linux常用命令解析,PHP,掌握Linux常用命令、掌握部署宝塔LAMP环境、掌握域名解析、掌握免费SSL证书申请及配置,51CTO学堂为您提供全面的视频课程和专项解答,it人充电,就上51CTO学堂icon-default.png?t=M276https://edu.51cto.com/course/29827.htmlH5网页-WebSocket(Workerman-PHP)即时通讯 点对点、多人聊天室【共28课时】_JavaScript课程-51CTO学堂H5网页-WebSocket(Workerman-PHP)即时通讯 点对点、多人聊天室,JavaScript,从0开发点对点聊天、多人聊天室(Workerman-PHP),项目部署至linux设置WSS协议,51CTO学堂为您提供全面的视频课程和专项解答,it人充电,就上51CTO学堂icon-default.png?t=M276https://edu.51cto.com/course/29832.html

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/笔触狂放9/article/detail/120510
推荐阅读
相关标签
  

闽ICP备14008679号