magic-touch

0.0.7 • Public • Published

MagicTouch

MagicTouch は マウスでもタブレット端末でも同様な操作感のイベントを提供します。

使用方法

MagicTouch をインストールするコマンドを入力します。 npm i -S magic-touch

ライブラリ利用方法

以下サンプル

const elem = document.getElementById('target');
MagicTouch.enchantment(elem);
// 以下イベント
elem.addEventListener('hold', (ev) => {
    // 長押しされた
});
elem.addEventListener('flick', (ev) => {
    // マウスまたは指で弾かれた。
});
elem.addEventListener('holdmove', (ev) => {
    // 長押し後に移動した
});
elem.addEventListener('holdleave', (ev) => {
    // 長押しを解除した。
});
elem.addEventListener('holdover', (ev) => {
    // enchantmentを受けた他の要素で長押しを開始し、elem上にマウスを移動した。
});
elem.addEventListener('holdldrop', (ev) => {
    // enchantmentを受けた他の要素で長押しを開始し、elem上で長押しを解除した。
});

ドキュメント

利用方法はenchantmentを呼び出すのみです。引数は以下の通り

  • element: HTMLElement イベントを有効にするエレメント
  • opts: Object オプション。この値は変更すればすでに反映済みの要素のしきい値も変化する。項目は以下
    • holdThreshold: number (既定: 750) mousedownまたはtouchstartから長押しと判定するまでの期間。(ミリ秒)
    • acceptableDistThreshold: number (既定: 1.5) 長押し(その場で押し続ける)際に許容するブレ。(マウスまたは指の加速度)
    • flickThreshold: number (既定: 1.5) フリック操作と判定する際の加速度

各イベントオブジェクト

すべてCustomEventにて実装しているので以下はdetail内を示す。

  • hold
プロパティ 意味
point {x: number, y: numnber} タップまたはクリックの開始座標(pageX/pageY相当)
rawEv MouseEvent | TouchEvent holdイベントを発砲するきっかけとなったmousedownまたはtouchstartイベントのイベントオブジェクト
  • holdmove
プロパティ 意味
point {x: number, y: numnber} 移動後のタップまたはクリック座標(pageX/pageY相当)
rawEv MouseEvent | TouchEvent holdイベントを発砲するきっかけとなったmousedownまたはtouchstartイベントのイベントオブジェクト
  • holdover
プロパティ 意味
point {x: number, y: numnber} 移動後のタップまたはクリック座標(pageX/pageY相当)
item HTMLElement タップまたはクリックを開始したHTMLElement
rawEv MouseEvent | TouchEvent holdイベントを発砲するきっかけとなったmousedownまたはtouchstartイベントのイベントオブジェクト
  • holdleave
プロパティ 意味
point {x: number, y: numnber} タップまたはクリックが終了する直前の座標(pageX/pageY相当)
rawEv MouseEvent | TouchEvent holdイベントを発砲するきっかけとなったmousedownまたはtouchstartイベントのイベントオブジェクト
  • holddrop
プロパティ 意味
point {x: number, y: numnber} 移動後のタップまたはクリック座標(pageX/pageY相当)
item HTMLElement タップまたはクリックを開始したHTMLElement
rawEv MouseEvent | TouchEvent holdイベントを発砲するきっかけとなったmousedownまたはtouchstartイベントのイベントオブジェクト
  • flick
プロパティ 意味
start {x: number, y: numnber} タップまたはクリックの開始座標(pageX/pageY相当)
point {x: number, y: numnber} タップまたはクリックが終了する直前の座標(pageX/pageY相当)
angle number フリックで指を弾いたときの角度(rad)
speed number フリックで指を弾いたときの加速度
rawEv MouseEvent | TouchEvent holdイベントを発砲するきっかけとなったmousedownまたはtouchstartイベントのイベントオブジェクト

Package Sidebar

Install

npm i magic-touch

Weekly Downloads

4

Version

0.0.7

License

MIT

Unpacked Size

23.4 kB

Total Files

5

Last publish

Collaborators

  • kasaparasol