mui提供了tap事件替換了html5的click事件，解決了300ms延時(shí)的問(wèn)題。不過(guò)相比原生app的click體驗(yàn)還是有些許差距的。關(guān)于300ms延時(shí)的問(wèn)題，這篇帖子分析的比較完善,其中提到了穿透的問(wèn)題，值得一讀
僅用微信為例，只有當(dāng)手指離開屏幕時(shí)才觸發(fā)click事件，如果對(duì)象綁定了長(zhǎng)按事件，則觸發(fā)長(zhǎng)按操作,離開時(shí)不再觸發(fā)單擊事件。
這些邏輯無(wú)論是android, ios或者僅有1%的windows mobile都已經(jīng)封裝好了，根本不用關(guān)心。

那么，我們應(yīng)該怎么來(lái)實(shí)現(xiàn)呢？
下面是詳細(xì)的填坑歷程。。。。。。

坑1.通過(guò)原生的touch來(lái)實(shí)現(xiàn)

//直接對(duì)dom添加touchend，這種方法只能針對(duì)位置不變且并沒(méi)有添加longtap事件的DOM有效
//如果在listview中，你上下滑動(dòng)，那就歇菜了。
//那么自然而然就想到了touch.target的位移，并做出判斷是下滑還是單擊。
//自己去寫復(fù)雜度、代碼量估計(jì)會(huì)很可觀。
//因此就想到了了在原有的框架代碼上去實(shí)現(xiàn)。
//下面就到了坑2
document.getElementById("").('touchend', function() {
    //
});

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

坑2.1 自定義事件偵聽機(jī)制

mui沒(méi)有提供類似于jq.data('events')獲取事件列表的機(jī)制，另外官方也推薦使用addEventListener去綁定事件。
我要去獲取當(dāng)前DOM的事件列表應(yīng)該怎么做呢？

你問(wèn)我問(wèn)毛要去獲取DOM的事件列表，，，
呵呵，我總要知道DOM有木有綁定longtap事件好做規(guī)避吧

csdn的這個(gè)帖子看似有用
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;
}

實(shí)際上并沒(méi)有什么卵用
思想是好的.....
我總不能每次addEventListener都去調(diào)一下這個(gè)方法吧！

坑2.2 使用getEventListeners

找啊找，終于找到了getEventListeners()這個(gè)全局方法，在chrome和safari控制臺(tái)中測(cè)試都木有問(wèn)題。
喜出望外......
這下終于能解決問(wèn)題了
于是有了以下的方法

	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];
	}

調(diào)用下試試

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

報(bào)錯(cuò)
getEventListeners is undefined

R U kidding?!!!!

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

我瞬間感受到了深深地惡意

原來(lái)這個(gè)方法只能在控制臺(tái)中用，
呵呵，人艱不拆......

坑2.3 使用全局變量規(guī)避

給mui添加一個(gè)全局變量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中判斷有無(wú)激活

	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 {
						//如果當(dāng)前對(duì)象添加了長(zhǎng)按偵聽，略過(guò)，否則仍然視為tap事件
						//if (!hasEventype(target, 'longtap')) {
						if (!$.isLongTapAtived) {
                        	//如果沒(méi)有l(wèi)ongtap事件,離開屏幕是觸發(fā)tap事件
							$.trigger(target, name, touch);
						}
                        //重置
						$.isLongTapAtived = false;
					}
				}
				break;
		}
	};

想法是美好的，現(xiàn)實(shí)是他么殘酷的。無(wú)論有無(wú)longtap事件,都要走一遍longtap的handle代碼
于是 $.isLongTapAtived === true;
于是 永遠(yuǎn)trigger tap 事件

呵呵，想死的心都有了

---

路子看來(lái)是走對(duì)了，但是應(yīng)該怎么做？？？

終極解決方案

mui.isLongTapAtived依然添加，只是在每一次DOM添加的longtap事件內(nèi)激活

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

這樣對(duì)開發(fā)者是不友好的，不過(guò)暫時(shí)沒(méi)辦法，只能如此取舍了

代碼已提交至https://github.com/phillyx/mui/
并推送給官方

總結(jié)

以上是生活随笔為你收集整理的MUI的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。