在上代码之前,微信小程序点击事件,长按事件的触发顺序需要我们了解一下下

  事务分类

    touchstart:手指触摸

    longtap:手指触摸后后,超过350ms离开

    touchend:手指触摸动作结束

    tap:手指触摸后离开

事件 触发顺序
单击 touchstart → touchend → tap
长按 touchstart → longtap → touchend → tap

  通过上表格可以发现,单击事件与长按事件的区别就在于 longtap事件,所以我们通过longtap事件进行区分。现在可以开始上代码啦

  .xwml  文件

  <view >
    <image  src='{{urls}}' class="asd" mode="aspectFit" bindtap='nophonefull' id="{{urls}}"  bindlongtap="bingLongTap" bindtouchstart="touchStart" bindtouchend="touchEnd"></image>
  </view>
 
  .js  文件
  //定义用到的变量

  data: {
    startTime:0,   //点击开始时间
    endTime:0  //点击结束时间
  }
  //手指触摸开始赋值
  touchStart: function (e) {
    this.startTime = e.timeStamp;
  }
  //手指触摸结束赋值
  touchEnd: function (e) {
    this.endTime = e.timeStamp;
  }
  // nophonefull 不管点击还是长按都会触发的事件

  nophonefull: function () {
    //通过判断手指触摸时间来判断是否是点击事件,当时间差小于350时,为点击事件
    if (this.endTime - this.startTime < 350) {
      //这里可以做点击事件的处理啦
    }
  }
  //只有长按事件才会触发 
  bingLongTap : function(e){
    //这里可以做长按事件要处理的
  }
 
  以上就是区分点击事件和长按事件的方法啦,如果有不对的地方或者有跟简单的方法,欢迎留言
 
 

    

微信小程序区分点击,长按事件的更多相关文章

  1. 微信小程序实现点击拍照长按录像功能

    微信小程序实现点击拍照长按录像功能 代码里面注释写的都很详细,直接上代码.官方的组件属性中有触摸开始和触摸结束属性.本功能依靠这些属性实现. .wxml代码: <!-- 相机 pages/cam ...

  2. 微信小程序开发——点击按钮获取用户授权没反应或反应很慢的解决方法

    异常描述: 点击按钮获取用户手机号码,有的时候会出现点击无反应或很久之后才弹出用户授权获取手机号码的弹窗,这种情况下,也会出现点击穿透的问题(详见:微信小程序开发——连续快速点击按钮调用小程序api返 ...

  3. 微信小程序ios点击状态栏返回顶部不好使

    最近做了一款微信小程序,各方面感觉都很完美(萝卜一直这么自信),今天设计总监告诉我你的小程序怎么返回顶部不好使呀,吓得我赶紧拿手机试试,没毛病啊,我手机(苦逼的安卓机)上点两下就回去了呀,遂去找他理论 ...

  4. 微信小程序开发——点击按钮退出小程序的实现

    微信小程序官方是没有提供退出的API的,但是在navigator这个组件中,是有退出这个功能的:详情参考官方文档:navigator.示例代码:1 navigator open-type=" ...

  5. 微信小程序:点击预览图片

    在开发微信小程序时,开发人员会参考着小程序api来开发小程序,但有的时候根据情况不同很容易出现bug,以下是我在开发小程序时出现的各种bug,在开发时有需要预览图片. 1.xml <view c ...

  6. 微信小程序开发系列五:微信小程序中如何响应用户输入事件

    微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...

  7. 微信小程序----搜索框input回车搜索事件

    在微信小程序里的搜索框,按软键盘回车键触发搜索事件. <input type="text"  placeholder="搜索" value="{ ...

  8. 微信小程序里解决app.js onLaunch事件与小程序页面的onLoad加载前后异常问题

    使用 Promise 解决小程序页面因为需要app.js onLaunch 参数导致的请求失败 app.js onLaunch 的代码 "use strict"; Object.d ...

  9. 微信小程序开发——点击防重的解决方案

    对于一些涉及后端接口请求的单击事件,不论后端是否做了请求限制,前端还是有必要进行点击防重处理的. 这样既能减少对服务器端的压力,也能有效防止因重复请求而造成一些不可预期的异常. 尤其是接口请求结果处理 ...

随机推荐

  1. Vue+SpringBoot+Mybatis的简单员工管理项目

    本文项目参考自:https://github.com/boylegu/SpringBoot-vue 为了完成此项目你需要会springBoot,mybatis的一些基本操作 运行界面 第一步:搭建前端 ...

  2. Linux日志每日备份脚本

    2018-5-28 10:59:07 星期一 原理是: 1. 每天0点0分crontab执行备份脚本 2. 先将当前日志文件copy一份作为备份, 备份文件名的后缀为前一天 3. 用当前日志的最后50 ...

  3. vue-地址插件 v-region

    demo地址:https://terryz.gitee.io/vue/#/region/demo

  4. js在数组arr中随机获取count数量的元素

    // 在数组arr中随机获取count数量的元素; const getRandomArrayElements = (arr, num) => { // 新建一个数组,将传入的数组复制过来,用于运 ...

  5. (转发)Navicat 远程连接 Linux服务器上的MySQL数据库

    授权法: 在安装mysql的机器上运行: 1.# ./bin/mysql -uroot -p //这样应该可以进入MySQL服务器 2.mysql> GRANT ALL PRIVILEGES O ...

  6. jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结

    1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']&quo ...

  7. mysql触发器Before和After的区别

    Before与After区别:before:(insert.update)可以对new进行修改.                    after不能对new进行修改.                 ...

  8. Excel—单元格引用

    EXCEL的引用有3种:相对引用.绝对引用.混合引用 相对引用.绝对引用比较简单,就是要么拖拽后变,要么拖拽后不变 混合引用有点难度,凡是需要向右拖拽再向下拖拽的记住一定是混合引用 要将拖拽后依然不变 ...

  9. 3.RNN推导

    1.基本RNN结构 这几天想入门NLP,所以开始了解RNN以及一系列变体.首先RNN最原始的结构如下图(图是按自己的理解用visio画的,有错麻烦提一下), 首先我们来说明一下各个符号的定义: 各个变 ...

  10. java中的try-catch-finally异常处理(学习笔记)

    一.异常概述 异常:Exception,是在运行发生的不正常情况. 原始异常处理: if(条件) { 处理办法1 处理办法2 处理办法3 } if(条件) { 处理办法4 处理办法5 处理办法6 } ...