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：https://github.com/AlloyTeam/AlloyTouch