MUI - 将tap模拟成原生click体验
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
事件,都要走一遍longtap
的handle
代码
于是 $.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体验的更多相关文章
- MUI简介-最接近原生App体验的前端框架
MUI简介-最接近原生App体验的前端框架 一.总结 一句话总结:最接近原生App体验的前端框架 二.多端发布 – 开发一套代码,发布六个平台 真正彻底的跨平台开发,不是简单的跨iOS和Android ...
- 最接近原生APP体验的高性能前端框架-MUI
前 言 轻量,原生UI,流畅体验,是MUI的三个特征. 1. 新手指南 快速体验 1. 下载Hello mui App 下载已打包好的Hello mui 手机app,直接在手机上体验mui的 ...
- 最接近原生APP体验的高性能前端框架——MUI
前 言 MUI有三大特点: 轻量 追求性能体验,是我们开始启动MUI项目的首要目标,轻量必然是重要特征: MUI不依赖任何第三方JS库,压缩后的JS和CSS文件仅有100+K和60+K 原生UI ...
- MUI-最接近原生App体验的前端框架
MUI:让HTML5达到原生体验的高性能开源框架 UI组件 HelloMUI HTML5+开发移动app教程3-mui开发示例
- @click.native 会触发原生 click事件 vue
@click.native 会触发原生 click事件 vue
- Spring Native 项目,把 Spring 项目编译成原生程序!
Spring Native 是什么 优点 缺点 原生镜像(native image)和常规 JVM 程序的区别 前置条件:GraalVM 支持的语言 关键特性 GraalVM 下的 Java 微服务 ...
- 如何将原生微信小程序页面改成原生VUE框架的H5页面
项目背景: 公司为了实现小程序与H5页面共同覆盖,全面推广.特此想将已有的小程序进行快速改造上线(二周内),研发出H5版本.目前公司前端技术较为薄弱,现有的技术解决方案还停留在JSP. 问题: 如何将 ...
- js 模拟 select 的 click 事件
法一. 你可以直接通过修改 select 的 size 属性来实现,但是这样比较丑,很明显:原来: 修改 size: 跟原生比丑在两点: 位置上移了 滚动条出现了 法二. 比较好的实现,就是通过 js ...
- 触屏Tap模拟事件
触屏的click因为有双击判断所以有200ms的延迟,zepto里的touch.js兼容不好所以tap也没法直接用. gibhub上有个fastclick太大了. 自己用touched写个简单的模拟t ...
随机推荐
- java nio 网络框架
https://github.com/solq360/common 主要运行在android 平台 解决自动化编/解码,等等.. 模块 解决问题/实现处理 备注 负责人 进度 录音播放 AudioRe ...
- 【Web】Eclipse + Maven + Struts搭建服务器
一.环境 系统:Windows7 IDE:Eclipse-Kepler Service Release 2 使用插件:Maven(请预先在电脑上安装Maven) 二.搭建 在Eclipse中新建一个M ...
- 【Machine Learning】机器学习の特征
绘制了一张导图,有不对的地方欢迎指正: 下载地址 机器学习中,特征是很关键的.其中包括,特征的提取和特征的选择.他们是降维的两种方法,但又有所不同: 特征抽取(Feature Extraction): ...
- ubuntu使用
1主机名修改 在Ubuntu系统中永久修改主机名也比较简单.主机名存放在/etc/hostname文件中,修改主机名时,编辑hostname文件,在文件中输入新的主机名并保存该文件即可.
- 【Java】一次SpringMVC+ Mybatis 配置多数据源经历
需求 现在在维护的是学校的一款信息服务APP的后台,最近要开发一些新功能,其中一个就是加入学校电影院的在线购票.在线购票实际上已经有一套系统了,但是是外包给别人开发的,我们拿不到代码只能拿到数据库,并 ...
- 受限玻尔兹曼机(RBM)学习笔记(四)对数似然函数
去年 6 月份写的博文<Yusuke Sugomori 的 C 语言 Deep Learning 程序解读>是囫囵吞枣地读完一个关于 DBN 算法的开源代码后的笔记,当时对其中涉及的算 ...
- nodejs 常用全局包
1.nodemon 更改node程序后程序自动启动 (nodemon app.js) npm install nodemon -g 2.gulp 压缩合并代码等 npm install gulp - ...
- node.js中文资料导航 Mark
Node.js HomePage Infoq深入浅出Node.js系列(进阶必读) Node.js中文文档 被误解的 Node.js Node.js C++ addon编写实战系列 热门node.js ...
- UWP开发入门(十八)——使用ContentControl减少页面元素数量
我们今天学习一下ContentControl,主要介绍如何使用ContentControl搭配DataTemplate来进行界面的复用,以及通过ContentTemplateSelector进一步减少 ...
- 领域驱动设计(DDD)实现之路
2004年,当Eric Evans的那本<领域驱动设计——软件核心复杂性应对之道>(后文简称<领域驱动设计>)出版时,我还在念高中,接触到领域驱动设计(DDD)已经是8年后的事 ...