mui提供了tap事件替换了html5的click事件,解决了300ms延时的问题。不过相比原生app的click体验还是有些许差距的。关于300ms延时的问题,这篇帖子分析的比较完善,其中提到了穿透的问题,值得一读

仅用微信为例,只有当手指离开屏幕时才触发click事件,如果对象绑定了长按事件,则触发长按操作,离开时不再触发单击事件。

这些逻辑无论是android, ios或者仅有1%的windows mobile都已经封装好了,根本不用关心。

那么,我们应该怎么来实现呢?

下面是详细的填坑历程。。。。。。

坑1.通过原生的touch来实现

//直接对dom添加touchend,这种方法只能针对位置不变且并没有添加longtap事件的DOM有效
//如果在listview中,你上下滑动,那就歇菜了。
//那么自然而然就想到了touch.target的位移,并做出判断是下滑还是单击。
//自己去写复杂度、代码量估计会很可观。
//因此就想到了了在原有的框架代码上去实现。
//下面就到了坑2
document.getElementById("").('touchend', function() {
//
});

坑2.更改mui.gestures.tap.js

坑2.1 自定义事件侦听机制

mui没有提供类似于jq.data('events')获取事件列表的机制,另外官方也推荐使用addEventListener去绑定事件。

我要去获取当前DOM的事件列表应该怎么做呢?

你问我问毛要去获取DOM的事件列表,,,

呵呵,我总要知道DOM有木有绑定longtap事件好做规避吧

csdn的这个帖子看似有用

http://bbs.csdn.net/topics/390250552

function addEvent(dom,type,fn) {
if(document.addEventListener) {
dom.addEventListener(type, fn, false);
} else if(document.attachEvent) {
dom.attachEvent('on' + type, fn);
} else {
dom['on' + type] = fn;
};
dom["Listener-"+type]=!0;
}

实际上并没有什么卵用

思想是好的.....

我总不能每次addEventListener都去调一下这个方法吧!

坑2.2 使用getEventListeners

找啊找,终于找到了getEventListeners()这个全局方法,在chrome和safari控制台中测试都木有问题。

喜出望外......

这下终于能解决问题了

于是有了以下的方法

	var getEvents = function(obj) {
console.log(getEventListeners(obj));
return typeof(getEventListeners) == "function" && getEventListeners(obj);
}
var hasEventype = function(obj, e) {
var es = getEvents(obj);
console.log(es[e]);
return es && !!es[e];
}

调用下试试

if (!hasEventype(target, 'longtap')) {}

报错

getEventListeners is undefined

R U kidding?!!!!

你丫在逗我.............

我瞬间感受到了深深地恶意

原来这个方法只能在控制台中用,

呵呵,人艰不拆......

坑2.3 使用全局变量规避

给mui添加一个全局变量isLongTapAtived,看变量名就知道什么意思吧

mui.gestures.longtap.js中初始化,在handle中激活

(function($, name) {
$.isLongTapAtived = false;//初始化
var timer;
var handle = function(event, touch) {
switch (event.type) {
case $.EVENT_START:
clearTimeout(timer);
timer = setTimeout(function() {
$.trigger(session.target, name, touch);
//激活了
$.isLongTapAtived = true;
}, options.holdTimeout);
break;
}
}; });
})(mui, 'longtap');

mui.gestures.tap.js中判断有无激活

	var handle = function(event, touch) {
var session = $.gestures.session;
var options = this.options;
switch (event.type) {
case $.EVENT_END:
//......
if (touch.distance < options.tapMaxDistance) {
if (touch.deltaTime < options.tapMaxTime) {
//.....
} else {
//如果当前对象添加了长按侦听,略过,否则仍然视为tap事件
//if (!hasEventype(target, 'longtap')) {
if (!$.isLongTapAtived) {
//如果没有longtap事件,离开屏幕是触发tap事件
$.trigger(target, name, touch);
}
//重置
$.isLongTapAtived = false;
}
}
break;
}
};

想法是美好的,现实是他么残酷的。无论有无longtap事件,都要走一遍longtaphandle代码

于是 $.isLongTapAtived === true;

于是 永远trigger tap 事件

呵呵,想死的心都有了


路子看来是走对了,但是应该怎么做???

终极解决方案

mui.isLongTapAtived依然添加,只是在每一次DOM添加的longtap事件内激活

document.querySelector("#").addEventListener('longtap',function(){
mui.isLongTapAtived=true;
console.log('你触发了longtap事件');
});

这样对开发者是不友好的,不过暂时没办法,只能如此取舍了

代码已提交至https://github.com/phillyx/mui/

并推送给官方

MUI - 将tap模拟成原生click体验的更多相关文章

  1. MUI简介-最接近原生App体验的前端框架

    MUI简介-最接近原生App体验的前端框架 一.总结 一句话总结:最接近原生App体验的前端框架 二.多端发布 – 开发一套代码,发布六个平台 真正彻底的跨平台开发,不是简单的跨iOS和Android ...

  2. 最接近原生APP体验的高性能前端框架-MUI

      前  言 轻量,原生UI,流畅体验,是MUI的三个特征.   1. 新手指南 快速体验 1. 下载Hello mui App 下载已打包好的Hello mui 手机app,直接在手机上体验mui的 ...

  3. 最接近原生APP体验的高性能前端框架——MUI

      前  言 MUI有三大特点: 轻量 追求性能体验,是我们开始启动MUI项目的首要目标,轻量必然是重要特征: MUI不依赖任何第三方JS库,压缩后的JS和CSS文件仅有100+K和60+K 原生UI ...

  4. MUI-最接近原生App体验的前端框架

    MUI:让HTML5达到原生体验的高性能开源框架 UI组件 HelloMUI HTML5+开发移动app教程3-mui开发示例

  5. @click.native 会触发原生 click事件 vue

    @click.native 会触发原生 click事件 vue

  6. Spring Native 项目,把 Spring 项目编译成原生程序!

    Spring Native 是什么 优点 缺点 原生镜像(native image)和常规 JVM 程序的区别 前置条件:GraalVM 支持的语言 关键特性 GraalVM 下的 Java 微服务 ...

  7. 如何将原生微信小程序页面改成原生VUE框架的H5页面

    项目背景: 公司为了实现小程序与H5页面共同覆盖,全面推广.特此想将已有的小程序进行快速改造上线(二周内),研发出H5版本.目前公司前端技术较为薄弱,现有的技术解决方案还停留在JSP. 问题: 如何将 ...

  8. js 模拟 select 的 click 事件

    法一. 你可以直接通过修改 select 的 size 属性来实现,但是这样比较丑,很明显:原来: 修改 size: 跟原生比丑在两点: 位置上移了 滚动条出现了 法二. 比较好的实现,就是通过 js ...

  9. 触屏Tap模拟事件

    触屏的click因为有双击判断所以有200ms的延迟,zepto里的touch.js兼容不好所以tap也没法直接用. gibhub上有个fastclick太大了. 自己用touched写个简单的模拟t ...

随机推荐

  1. VS2010 项目引用了微软企业库,但是编译时提示:未能找到类型或命名空间名称

    我写的是控制台程序 是在引用我自己写的库 和 Microsoft.Practices.EnterpriseLibrary 时出现的问题 经过分析,和百度 找到了修改方法 打开  项目属性-->应 ...

  2. oracle 11g 如何创建、修改、删除list-list组合分区

    Oracle11g在分区方面做了很大的提高,不但新增了4种复合分区类型,还增加了虚拟列分区.系统分区.INTERVAL分区等功能. 9i开始,Oracle就包括了2种复合分区,RANGE-HASH和R ...

  3. 解决错误: java.lang.NoClassDefFoundError: antlr/RecognitionException

    网络质量不好的情况下,访问maven.org网站下载jar包,很有可能下载的包不完整或损坏的(表面看不出来):所以,最好的办法就是-直接到maven网站下载,然后放到对应的.m2目录,然后eclips ...

  4. LDPC编译码基本原理

    LDPC编译码基本原理     学习笔记 V1.1 2015/02/18 LDPC编译码基本原理   概述   本文是个人针对LDPC的学习笔记,主要针对LDPC译码算法做了简要的总结.该版本主要致力 ...

  5. bootstrap插件学习-bootstrap.alert.js

    我们先看bootstrap.alert.js的结构 var dismiss = '[data-dismiss="alert"]' //自定义属性 Alert = function ...

  6. Jellycons – iOS 8 图标下载(PNG, SKETCH)

    Jellycons 这套由 LoveUI.co 设计图标包括30款扁平化,圆滑,丰富多彩的 iOS 8 应用程序图标,可以用于于个人和商业项目的使用.另外,PNG 格式包含11种尺寸(1024px, ...

  7. LeetCode——Contains Duplicate III

    Description: Given an array of integers, find out whether there are two distinct indices i and j in ...

  8. statpot:使用mongo+bootstrap+highcharts做统计报表

    最近做了一个统计项目,这个统计项目大致的需求是统计接口的访问速度.客户端会调用一个接口来记录接口的访问情况,我的需求就需要分析这些数据,然后做出个统计报表. 需求实现 最初的时候想着每天把这些接口访问 ...

  9. C# 文字转声音

    添加COM组件引用:Microsoft Speech object library private SpVoice voice; private void button1_Click(object s ...

  10. Spring基础——一个简单的例子

    一.学习版本 spring-framework-4.0.0 二.导入 jar 包: 三.在类路径下创建 Spring Config 文件:ApplicationContext.xml <?xml ...