React Reference > ons-gesture-detector Component

<ons-gesture-detector />

Component to detect finger gestures within the wrapped element. Following gestures are supported:

  • Drag gestures: drag, dragleft, dragright, dragup, dragdown
  • Hold gestures: hold, release
  • Swipe gestures: swipe, swipeleft, swiperight, swipeup, swipedown
  • Tap gestures: tap, doubletap
  • Pinch gestures: pinch, pinchin, pinchout
  • Other gestures: touch, transform, rotate

Usage 


<ons-gesture-detector>
  <div id="detect-area" style="width: 100px; height: 100px;">
    Swipe Here
  </div>
</ons-gesture-detector>
<script>
  document.addEventListener('swipeleft', function(event) {
    if (event.target.matches('#detect-area')) {
      console.log('Swipe left is detected.');
    }
  });
</script>

See also

Need Help?

If you have any questions, use our Community Forum or talk to us on Discord chat. The Onsen UI team and your peers in the community will work together to help solve your issues.

For bug reports and feature requests use our GitHub Issues page.