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();

import { render, tag, WeElement } from 'omi' import 'omi-finger' @tag('my-app') class MyApp extends WeElement { install() { this.data.wording = 'Tap or Swipe Me!' } handleTap = (evt) => { this.data.wording += '\r\nTap' this.update() } handleSwipe = (evt) => { this.data.wording += '\r\nSwipe-' + evt.direction this.update() } render() { return ( <div> <omi-finger onTap={this.handleTap} abc={{a:1}} onSwipe={this.handleSwipe}> <div class="touchArea" > {this.data.wording} </div> </omi-finger> </div> ) } css() { return `.touchArea{  background-color: green;  width: 200px;  min-height: 200px;  text-align: center;  color:white;  height:auto;  white-space: pre-line;  }` } } render(<my-app></my-app>, 'body')