AlloyTouch Button 插件 - 再也不愁 click 延遲和點擊態

移動端不能使用click，由於click會有300ms。全部有了fastclick這樣的解決方案。而後fastclick並無解決點擊態（用戶點擊的瞬間要有及時的外觀變化反饋）的問題。hover會有不消失的問題，全部你們通常用:active。利用 :active 僞類來設置某元素被點擊時的點擊態樣式。
在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 + 一堆聲明 + 放棄部分系統的兼容？

有沒有更好的解決方案？且看AlloyTouch Button插件~~

語法

new AlloyTouch.Button(selector, onTap [,activeClass])複製代碼

• selector：須要變成按鈕的選擇器
• onTap: 用戶點擊按鈕的回調函數
• activeClass：可選參數，點擊狀態下添加的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);
}複製代碼

在建立Button對象實例的時候，其實建立了AlloyTouch對象實例。這裏分析在option。

• touch: selector 須要變成按鈕的的對象
• tap: tap 直接把建立button的tap傳給alloytouch的tap
• preventDefault: false 不阻止默認事件。否則的話，手指放在button上時，頁面拖不動。

當用戶傳入了active參數時候，分別給綁定了touchMove、toucStart、touchEnd和touchCancel事件。

• touchMove、touchEnd和touchCancel均會移除active的class。
• toucStart會增長active的class。

最後

更多例子演示和代碼能夠在Github上找到。
Github：github.com/AlloyTeam/A…