Skip to content

ecomfe/saber-tap

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

36 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

saber-tap

一个让移动端支持无延迟点击的小模块,基于 FastClick

This project is forked from ftlabs/fastclick

Precondition

使用 saber-tap 之前需要满足下列前提:

  • viewport 必须设置了 user-scalable=no
  • 只支持使用 webkit 内核的手机、平板设备浏览器

Installation

在满足以上 前提 时:

通过 edp 引入模块:

edp import saber-tap

Usage

// 引入 `saber-tap` 模块
var Tap = require('saber-tap');

// 特定范围内应用无延迟点击,传入DOM元素或id
Tap.mixin('container');

// 若想全局应用,可在 `domready` 时传入 `body`
window.addEventListener('load', function() {
    Tap.mixin(document.body);
});

// 搞定之后绑定的 click 事件就没有延迟了
el.addEventListener('click', clickHandler);

因为 Tap 会在给定的 layer 上使用事件委托,为防止大范围的 tap-highlight 效果,推荐加上如下样式:

body {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

局部使用可将 body 换为对应的 layer

API

Methods

mixin(layer)

将 layer 元素内的点击事件换为无延迟点击。

  • layer {HTMLElement|string}

参数 layerDOM元素 <HTMLElement>DOM元素的id <string>