Gesture Helper

Detect tap and swipe gestures over elements.

Try me!

Usage

1. Import `gesture-helper` module

<script type="module">
  import "https://zuixjs.github.io/zkit/lib/1.2/controllers/gesture-helper.module.js";
</script>

2. Add component

Add the gesture helper component inside the detection area element:

<div>

    <gesture-helper z-context="gesture-helper"></gesture-helper>

    <!-- gesture detection area -->

</div>

1. Include `zuix.js` library

If not already included, add the following line right before the end of the head section in the HTML document:

<script src="https://cdn.jsdelivr.net/npm/zuix-dist@1.1.29/js/zuix.min.js"></script>

2. Load the gesture helper on the target element

Add the ctrl z-load attributes to the element you want to detect gesture over

<div ctrl z-load="https://zuixjs.github.io/zkit/lib/1.2/controllers/gesture-helper"
     z-context="gesture-helper">

    <!-- gesture detection area -->

</div>

Option attributes

z-context="<context_id>" optional
identifier name to be used to access this component from JavaScript.
:on:<event_name>="<handler>" optional
set handler function for event <event_name>
:passive optional
use passive mode for best performance or disable passive mode to prevent default scrolling.
The default value is true.
:start-gap optional

Events

gesture:touch
gesture:pan
gesture:release
gesture:tap
gesture:swipe

Event handlers receive as second argument the tp (TouchPointer) object that is described below:

tp = {

  // time frame
  startTime,
  endTime,

  // initial touch position
  startX,
  startY,

  // relative movement
  shiftX,
  shiftY,

  // actual direction, speed, position
  direction, // 'left' | 'right' | 'up' | 'down'
  velocity,
  x: x,
  y: y,

  // guessed scrolling direction
  scrollIntent(),  // false | 'horizontal' | 'vertical'

  // original event + cancel method
  event,
  cancel()
};

Controllers

Components

Support this work