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.13/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()
};
arrow_left  Previous
Next arrow_right 
Support this work
extension
zKit components v1.2.1
web enhancing bits