AlloyTouch Button插件-不再愁click延迟和点击态

本文探讨了移动端点击态实现的挑战，如click事件的300ms延迟及:active伪类的兼容性问题。介绍了AlloyTouchButton插件，一种解决移动端按钮点击反馈的有效方案，通过监听touch事件并自定义点击态样式，提升用户体验。

移动端不能使用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。