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