关于OnTouch 和OnClick同时调用冲突的解决方案

2018-08-20 15:26:19

大家在搞轮播图的时候会碰到这样的情况,点击进入webview界面,长按轮播图停止轮播,手松开图又开始轮播,这里就涉及到了OnTouch 和OnClick同时调用。两者是有冲突的。这里简单介绍,给大家提供思路。


onTouch,onClick,onLongClick事件发生先后顺序和关联:

一,onTouch返回false
首先是onTouch事件的down事件发生,此时,如果长按,触发onLongClick事件;
然后是onTouch事件的up事件发生,up完毕,最后触发onClick事件。

二,onTouch返回true
首先是onTouch事件的down事件发生,然后是onTouch事件的up事件发生;期间不触发onClick和onLongClick事件

三,onTouch:down返回true,up返回false:结果同二。
机制分析:
   onTouch事件中:down事件返回值标记此次事件是否为点击事件(返回false,是点击事件;返回true,不记为点击事件),而up事件标记此次事件结束时间,也就是判断是否为长按。
只要当down返回true时候,系统将不把本次事件记录为点击事件,也就不会触发onClick或者onLongClick事件了。因此尽管当up的时候返回false,系统也不会继续触发onClick事件了。

四,onTouch:down返回false,up返回true:
首先是onTouch事件的down事件发生,此时:
长按,触发onLongClick事件,然后是onTouch事件的up事件发生,完毕。
短按,先触发onTouch的up事件, 到一定时间后,自动触发onLongClick事件。
机制分析:
  onTouch事件中:down事件返回值标记此次事件是否为点击事件(返回false,是点击事件;返回true,不记为点击事件),而up事件标记此次事件结束时间,也就是判断是否为长按。
  当down返回false,标记此次事件为点击事件,而up返回了true,则表示此次事件一直没有结束,也就是一直长按下去了,达到长按临界时间后,自然触发长按事件,而onClick事件没有触发到

  • 2020-02-25 15:15:56

    nuxtjs全栈

    Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。 要在页面之间使用路由,我们建议使用<nuxt-link> 标签。

  • 2020-02-25 19:24:08

    IDEA 简单的正则匹配

    IDEA在进行查看或替换的时候,勾选Regex 选项就可以进行正则匹配查找了 几个简单实用的正则:

  • 2020-02-26 20:16:49

    一条简单的命令就可以将 stylus 语法转换为 scss 语法

    因为早期有个项目用到了 stylus,stylus 开发起来很爽,但 stylus 基于缩进的代码在修改的时候不是很方便,加上所在团队开发使用的都是 SCSS ,为了便于维护和统一,准备将项目中的 stylus 替换成 SCSS。手动转换 stylus 浪费时间,且出错率大,当时在想也许别人也有这样的需求呢,所以就做了这样一个项目。请各位大佬动动你们发财的小手,给我点个 star,不胜感激。^_^

  • 2020-02-27 09:01:32

    npm yarn 命令对比

    Yarn 是 Facebook, Google, Exponent 和 Tilde 开发的一款新的 JavaScript 包管理工具。就像我们可以从官方文档了解那样,它的目的是解决这些团队使用 npm 面临的少数问题.

  • 2020-02-29 20:47:34

    Nuxt 特有函数和变量

    asyncData方法使得你能够在渲染组件之前异步获取数据。该方法在服务端中执行的,所以,请求数据时,不存在跨域问题。返回的数据将与 data() 返回的数据进行合并。由于asyncData方法是在组件 初始化 前被调用的,所以在方法内是没有办法通过 this 来引用组件的实例对象。

  • 2020-03-01 19:00:46

    触发onclick事件元素的获取

    自动生成元素的onclick事件 event.target返回触发事件的元素 event.currentTarget返回绑定事件的元素