摘要：移動(dòng)端不能使用，因?yàn)闀?huì)有。然后并沒(méi)有解決點(diǎn)擊態(tài)用戶(hù)點(diǎn)擊的瞬間要有及時(shí)的外觀變化反饋的問(wèn)題。利用偽類(lèi)來(lái)設(shè)置某元素被點(diǎn)擊時(shí)的點(diǎn)擊態(tài)樣式。需要變成按鈕的的對(duì)象直接把創(chuàng)建的傳給的不阻止默認(rèn)事件。當(dāng)用戶(hù)傳入了參數(shù)時(shí)候，分別給綁定了和事件。

移動(dòng)端不能使用click，因?yàn)閏lick會(huì)有300ms。所有有了fastclick這樣的解決方案。然后fastclick并沒(méi)有解決點(diǎn)擊態(tài)（用戶(hù)點(diǎn)擊的瞬間要有及時(shí)的外觀變化反饋）的問(wèn)題。hover會(huì)有不消失的問(wèn)題，所有大家一般用:active。利用 :active 偽類(lèi)來(lái)設(shè)置某元素被點(diǎn)擊時(shí)的點(diǎn)擊態(tài)樣式。
在IOS上使用active必須聲明下面js:

document.addEventListener("touchstart", function() {},false);

CSS中記得去掉highlight color：

-webkit-tap-highlight-color: rgba(0,0,0,0);

需要注意的是：Android 2.x 仍不支持:active。

那么就 fastclick + :active + 一堆聲明 + 放棄部分系統(tǒng)的兼容？

有沒(méi)有更好的解決方案？且看AlloyTouch Button插件~~

  new AlloyTouch.Button(selector, onTap [,activeClass]) 

selector：需要變成按鈕的選擇器

onTap: 用戶(hù)點(diǎn)擊按鈕的回調(diào)函數(shù)

activeClass：可選參數(shù)，點(diǎn)擊狀態(tài)下添加的class

new AlloyTouch.Button("#button", function () {
    console.log("You tapped me.");
}, "active");

 AlloyTouch.Button = function (selector, tap, active) {
    var element = typeof selector === "string" ? document.querySelector(selector) : selector;
    var option = {
        touch: selector,
        tap: tap,
        preventDefault: false
    };
    if (active !== undefined) {
        option.touchStart = function ( ) {
            addClass(element, active);
        };
        touchMove = function ( ) {
            removeClass(element, active);
        };
        option.touchEnd = function ( ) {
            removeClass(element, active);
        };
        option.touchCancel = function () {
            removeClass(element, active);
        };
    }

    new AlloyTouch(option);
}

在創(chuàng)建Button對(duì)象實(shí)例的時(shí)候，其實(shí)創(chuàng)建了AlloyTouch對(duì)象實(shí)例。這里分析在option。

touch: selector 需要變成按鈕的的對(duì)象

tap: tap 直接把創(chuàng)建button的tap傳給alloytouch的tap

preventDefault: false 不阻止默認(rèn)事件。不然的話(huà)，手指放在button上時(shí)，頁(yè)面拖不動(dòng)。

當(dāng)用戶(hù)傳入了active參數(shù)時(shí)候，分別給綁定了touchMove、toucStart、touchEnd和touchCancel事件。

touchMove、touchEnd和touchCancel均會(huì)移除active的class。

toucStart會(huì)增加active的class。

更多例子演示和代碼可以在Github上找到。
Github：https://github.com/AlloyTeam/AlloyTouch