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…