Skip to content

/paw.js

A javascript library for generate useful touch event.
  1. JavaScript 100.0%
JavaScript
Find file
Download ZIP
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
dist version++
sample Fix bug
src
.gitignore
.jshintrc
LICENSE
README.md
bower.json version++
gulpfile.js
package.json

README.md

Paw.js

Paw.jsはタッチ操作のためのカスタムイベントを生成するJavaScriptライブラリです。

"シンプル", "小さく", "速く" をコンセプトに設計しています。

Custom events

`tap` event
`tap`イベントは、要素に触ってから指定された動きの制限範囲(デフォルト: 5px)を超えずに離れた場合に発火します
`doubletap` event
`doubletap`イベントは、同じ要素に対して指定時間内(デフォルト: 400ms)に2度`tap`イベントが発火された場合に、`tap`イベントに続いて発火します
`press` event
`press`イベントは、要素に触ってから指定された動きの制限範囲(デフォルト: 5px)を超えずに指が離れないまま指定時間(デフォルト: 500ms)を経過した際に発火します

使い方

簡単な使い方

// initialize
new Paw();

// handling event
var element = document.getElementById('someElement');

element.addEventListener('tap', function() {
    alert('tap!');    
});

// with jQuery
$('#someElement').on('tap', function() {
    alert('tap!');    
});

引数 & オプション

function Paw(rootNode, option) {...}
  • rootNode
    • type: Document|Node
    • default: window.document
    • optional
  • option
    • type: Object
    • optional
  • option.pressDuration
    • type: Number
    • default: 500
    • optional
  • option.doubleTapDuration
    • type: Number
    • default: 400
    • optional
  • option.motionThreshold
    • type: Number
    • default: 5
    • optional
  • option.fastClick
    • type: Boolean
    • default: true
    • optional

使用例

Paw.jsのイベント処理を行う要素を指定する

html
<html>
<head>...</head>
<body>
    <div id="toucharea">
        <button id="toucharea-btn">btn</button>
    </div>
    <div>
        <button id="normal-btn">btn</button>
    </div>
</body>
</html>
javascript
var toucharea = document.getElementById('toucharea');

// 第1引数に要素を指定すると、その要素を親とし以下の子孫に対してPaw.jsのイベントが発火する
new Paw(toucharea);

// "#toucharea-btn"要素は`tap`イベントを受け取ることができる
document.getElementById('toucharea-btn').addEventListener('tap', function() {
    alert('tap!'); 
});

// "#normal-btn"要素は`tap`イベントを受け取ることができない
document.getElementById('normal-btn').addEventListener('tap', function() {
    // never call 
});

use options

new Paw(null, {
        // `press`イベントが発火するまでの時間をミリセコンド単位で指定
        pressDuration     : 500,
        // `doubletap`イベントと判定される`tap`イベントの間隔時間をミリセコンド単位で指定
        doubleTapDuration : 400,
        // 指の動きの許容範囲をピクセル値で指定
        motionThreshold   : 5,
        // `tap`イベントと同時に`click`イベントを発火するための指定
        fastClick         : true
});

注意

  • fastClickオプションを指定した場合、windowオブジェクトに対してclickイベントをuseCapure: trueとしてハンドラを設定した時に(例: window.addEventListener('click', function() {...}, true))、イベントハンドラが1度のクリックで2度呼ばれる場合があります。
  • fastClickオプションを指定した場合、clickイベント発火直後にclickイベントを生成し発火した場合、後者のイベントはキャンセルされる可能性があります。

対応表

UserAgent status
Android 2.x(Stock Browser) with Polyfills
Android 3.x(Stock Browser) with Polyfills
Android 4.x~(Stock Browser) ready
Android 4.x(Chrome Browser) ready
iOS 6~(Mobile Safari) ready
Opera Mobile 14~ ready
Firefox OS ready
Internet Explorer 9.x~ ready
Google Chrome ready
Mozilla Firefox ready
Safari ready
Opera 15.x~ ready

Author

twitter@dameleon

License

Paw.js is licensed under MIT licensed.
See LICENSE for more information.

for japaninglish

Paw.js

the Paw.js generate a useful customized events for touch operation
and the concept of it is "Simplest", 'Tiniest', "Fastest".

Custom events

`tap` event
the `tap` event trigger when away while not exceeding the threshold value (default: 5px) by touching the element
`doubletap` event
the `doubletap` event trigger when the `tap` event is triggered twice within a specified period of time (default: 400ms) for the same element
`press` event
the `press` event trigger when the specified time has elapsed (default: 500ms) without exceeding the threshold value (default: 5px) by touching the element

How to use

simply use

// initialize
new Paw();

// handling event
var element = document.getElementById('someElement');

element.addEventListener('tap', function() {
    alert('tap!');    
});

// with jQuery
$('#someElement').on('tap', function() {
    alert('tap!');    
});

arguments & options

function Paw(rootNode, option) {...}
  • rootNode
    • type: Document|Node
    • default: window.document
    • optional
  • option
    • type: Object
    • optional
  • option.pressDuration
    • type: Number
    • default: 500
    • optional
  • option.doubleTapDuration
    • type: Number
    • default: 400
    • optional
  • option.motionThreshold
    • type: Number
    • default: 5
    • optional
  • option.fastClick
    • type: Boolean
    • default: true
    • optional

Examples

assign the element to handling the Paw.js events

html
<html>
<head>...</head>
<body>
    <div id="toucharea">
        <button id="toucharea-btn">btn</button>
    </div>
    <div>
        <button id="normal-btn">btn</button>
    </div>
</body>
</html>
javascript
var toucharea = document.getElementById('toucharea');

// assign the parent element of the range to handle the Paw.js events
new Paw(toucharea);

// the toucharea-btn can get the `tap` event
document.getElementById('toucharea-btn').addEventListener('tap', function() {
    alert('tap!'); 
});

// the normal-btn cannot get the `tap` event
document.getElementById('normal-btn').addEventListener('tap', function() {
    // never call 
});

use options

new Paw(null, {
        // a milliseconds time to fire the `press` event 
        pressDuration     : 500,
        // a milliseconds time interval for determining tap the `doubletap` event
        doubleTapDuration : 400,
        // a pixel range that allows the movement of the finger
        motionThreshold   : 5,
        // trigger the `click` event at the same time as the `tap` event
        fastClick         : true
});

Notice.

  • when you have enabled the fastClick, if you register an event handler in the state have enabled the useCapture option to the window object(e.g. window.addEventListener('click', function() {...}, true)) will receive twice the click event in a single tap.
  • when you have enabled the fastClick, if you fire to generate a click event immediately after firing the click event, there is a possibility that the latter event is canceled.

Compatibility table

UserAgent status
Android 2.x(Stock Browser) with Polyfills
Android 3.x(Stock Browser) with Polyfills
Android 4.x~(Stock Browser) ready
Android 4.x(Chrome Browser) ready
iOS 6~(Mobile Safari) ready
Opera Mobile 14~ ready
Firefox OS ready
Internet Explorer 9.x~ ready
Google Chrome ready
Mozilla Firefox ready
Safari ready
Opera 15.x~ ready

Author

twitter@dameleon

License

Paw.js is licensed under MIT licensed.
See LICENSE for more information.

Something went wrong with that request. Please try again.