Technology moves fast! ⚡ Don't get left behind.🚶 Subscribe to our mailing list to keep up with latest and greatest in open source projects! 🏆


Subscribe to our mailing list

AlloyFinger

super tiny size multi-touch gestures library for the web.    You can touch this →

Subscribe to updates I use AlloyFinger


Statistics on AlloyFinger

Number of watchers on Github 2267
Number of open issues 74
Average time to close an issue 4 days
Main language JavaScript
Average time to merge a PR about 5 hours
Open pull requests 1+
Closed pull requests 0+
Last commit about 1 year ago
Repo Created almost 3 years ago
Repo Last Updated about 1 year ago
Size 1.14 MB
Homepage http://alloyteam....
Organization / Authoralloyteam
Contributors1
Page Updated
Do you use AlloyFinger? Leave a review!
View open issues (74)
View AlloyFinger activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating AlloyFinger for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

Preview

You can touch this http://alloyteam.github.io/AlloyFinger/

Install

You can install it via npm:

npm install alloyfinger

Usage

AlloyCrop

Omi Version:

    render() {
        return  `
        <div>
      <div omi-finger ref="touchArea" onTap={this.handleTap}  onSwipe={this.handleSwipe} >
                Tap or Swipe Me!
            </div>
        </div>
        `;
    }

Pure JS:

var af = new AlloyFinger(element, {
    touchStart: function () { },
    touchMove: function () { },
    touchEnd:  function () { },
    touchCancel: function () { },
    multipointStart: function () { },
    multipointEnd: function () { },
    tap: function () { },
    doubleTap: function () { },
    longTap: function () { },
    singleTap: function () { },
    rotate: function (evt) {
        console.log(evt.angle);
    },
    pinch: function (evt) {
        console.log(evt.zoom);
    },
    pressMove: function (evt) {
        console.log(evt.deltaX);
        console.log(evt.deltaY);
    },
    swipe: function (evt) {
        console.log("swipe" + evt.direction);
    }
});

/**
 * this method can also add or remove the event handler
 */
var onTap = function() {};

af.on('tap', onTap);
af.on('touchStart', function() {});

af.off('tap', onTap);

/**
 * this method can destroy the instance
 */
af = af.destroy();

React Version:

import AlloyFinger from 'alloyfinger/dist/react/AlloyFinger';

// ...

render() {
    return (
        <AlloyFinger
            onTap={this.onTap.bind(this)}
            onMultipointStart={this.onMultipointStart.bind(this)}
            onLongTap={this.onLongTap.bind(this)}
            onSwipe={this.onSwipe.bind(this)}
            onPinch={this.onPinch.bind(this)}
            onRotate={this.onRotate.bind(this)}
            onPressMove={this.onPressMove.bind(this)}
            onMultipointEnd={this.onMultipointEnd.bind(this)}
            onDoubleTap={this.onDoubleTap.bind(this)}>
            <div className="test">the element that you want to bind event</div>
        </AlloyFinger>
    );
}

Thanks and Donate

License

This content is released under the MIT License.

AlloyFinger open issues Ask a question     (View All Issues)
  • over 2 years 好想知道这个项目能活多久
  • over 2 years tap和singleTap 有什么区别?
  • almost 3 years 安卓手机一个手指操作不会触发touchend事件导致swipe不能触发
  • almost 3 years 在安卓下会出现swipe事件不响应的问题
  • almost 3 years 魅族手机点不了
  • almost 3 years 如何对父子对象同时使用AlloyFinger--swipe
  • almost 3 years need add desotry method?
  • almost 3 years 源码里tapTimeout为什么是一个0毫秒的延迟函数
  • almost 3 years Tap事件获取不到touches或者changedTouches吗?
  • almost 3 years pressmove刚开始的时候direction为undefined
  • almost 3 years react 0.15下报错
  • almost 3 years Allow scrolling on gesture targets
  • almost 3 years 屏幕滚动被禁止
AlloyFinger open pull requests (View All Pulls)
  • prevent ghost click on anchor elements
AlloyFinger list of languages used
Other projects in JavaScript