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

  事务分类

    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. 10张思维导图带你学习Java​Script

    10张思维导图带你学习Java​Script   下面将po出10张JavaScript相关的思维导图. 分别归类为: JavaScript变量 JavaScript运算符 JavaScript数组 ...

  2. Linux Vi 的使用

    进入vi的命令 vi filename :打开或新建文件,并将光标置于第一行首 vi +n filename :打开文件,并将光标置于第n行首 vi + filename :打开文件,并将光标置于最后 ...

  3. Windows 下安装Git工具及基础使用

    Git简介 git是很好一个工具使用,可以执行liunx命令,有git环境后windows系统就可以进行shell命令操作,就可以添加其他liunx辅助软件进行执行,git也代码库管理工具,无论是上传 ...

  4. openwrt MT7628 编译前更改为DHCP,root 密码、ssid、时区、主机名

    一.设置为DHCP动态获取ip地址 在:/home/OpenWrt/openwrt_CC_mt76xx_zhuotk_source/ 目录下,新建文件名/files/etc/config. 将配置好的 ...

  5. 用什么方法给PDF添加页眉页脚

    我们所看到的书本中都会设置好有页眉页脚,那么电子书想要添加页眉页脚要怎么操作呢,用什么方法可以在PDF中添加页眉页脚呢,今天就为大家分享一下,如何在电子文件中添加页眉页脚,想知道的小伙伴们就一起来看看 ...

  6. SpringMVC的入门示例---基于注解的配置

    注解版的配置,主要的修改就是将原来使用<bean>创建的业务控制器对象,修改为是扫描标签扫描到容器. 1.导入包 2.在 web.xml 配置核心控制器 <?xml version= ...

  7. Eclipse安装git插件以及关联导入GitHub项目

    一.Eclipse配置git 1.查看自己eclipse的版本 打开eclipse 导航: help->AboutEclipse 如图: 2.检查Eclipse中是否已安装Git插件 菜单栏He ...

  8. 利用Centos服务器来搭建自己的splash,不再被安装的各种环境繁琐而担忧

    Centos7.5 ----- docker ------- splash               第一步:服务器环境的配置               第二步:dcoker环境的配置       ...

  9. EChart 文字大小调整 饼状图为例

    一.EChart图中的文字调整(以饼图为例) 二.源码: { "title": { "text": "", "subtext&qu ...

  10. Intellij Idea调试java文件时 怎么跳过class文件?

    Intellij Idea调试时 java文件时,遇到class文件时它也会反编译该文件,并跳入该class文件内一条条语句执行.这让我烦透了,怎么跳过class文件,继续调试啊? SETTINGS- ...