AlloyTouch Button外掛-不再愁click延遲和點選態

【當耐特】發表於2016-12-12

移動端不能使用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外掛-不再愁click延遲和點選態

原理

 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

相關文章