Skip to content

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

dntzhang edited this page Dec 22, 2016 · 1 revision

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