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

  事务分类

    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. 转-filebeat 源码分析

    背景 在基于elk的日志系统中,filebeat几乎是其中必不可少的一个组件,例外是使用性能较差的logstash file input插件或自己造个功能类似的轮子:). 在使用和了解filebeat ...

  2. 全平台网页播放器兼容H5与Flash还带播放列表

    许久不发文了,2018年第一篇文章,写点干货--关于网页播放器的问题.嗯,实际上我是在52破解首发的,当做新人贴. 目前来说,网页播放器不少,随便找找都能找到一大堆,然而好用的就那么几个,比如ckpl ...

  3. 浅析Memcache和Redis

    想必开发的小伙伴们对Memcache和Redis都不陌生吧,最近正好在整理它们,于是就写一下博客吧!一方面是分享,另一方面便于自己查找. 首先,来说说Memcache和Redis是什么? 说得简单一点 ...

  4. SpringBoot 自定义监听器(Listener)

    1. 使用场景:在一些业务场景中,当容器初始化完成之后,需要处理一些操作,比如一些数据的加载.初始化缓存.特定任务的注册.开启线程或程序来干某些事情等等. 2. 使用步骤: A. 监听类实现Appli ...

  5. python 2.7 数据结构之列表list: 基础面试总结

    python 列表函数及方法: 函数如下: 1 cmp(list1,list2) 比较两个列表中的元素 2 len(list) 列表元素个数 3 max(list) 返回列表元素最大值 4 min(l ...

  6. maven build pulgin

    <build> <defaultGoal>compile</defaultGoal> <plugins> <!-- 生成清单文件相关 --> ...

  7. 代码生成工具更新--快速生成Winform框架的界面项目

    在之前版本的代码生成工具Database2Sharp中,由于代码生成都是考虑Winform和Web通用的目的,因此Winform界面或者Web界面都是单独生成的,在工具中生成相应的界面后,复制到项目里 ...

  8. BigDecimal类型转换

    djjfbr.setMoney(new BigDecimal(djjfbillrecord.getMoney()));

  9. Round#534 div.2-B Game with string

    唔,第一次参加,掉了好多分. http://codeforces.com/contest/1104/problem/B 不用考虑太多,string真的好厉害. #include<stdio.h& ...

  10. 如何配置.Net Core Centos守护进程配置

    一.安装supervisor 运行命令 yum install supervisor 二.配置supervisor 1.运行命令创建文件夹 mkdir -p /etc/supervisor/conf. ...