Detects Swipe Left, Right, Top And Down - SwipeHandler

A jQuery based swipe event handler that makes it possible to detect Swipe Left, Right, Top And Down events on a specific container.

See Also:

• Detecting Swipes and Pinches On Touch Devices with touchSwipe Plugin
• Detect Swipe Events In Vanilla JavaScript – Swipe-it
• Detect Touch Swipe Direction In JavaScript – touchSweep

How to use it:

1. Download the package and load the compiled JavaScript jquerySwipeHandler.js from the dist folder.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/jquerySwipeHandler.js"></script>

2. Call the function on the target element and define which swipe events you want to detect:

• jquerySwipeHandler.SWIPE_LEFT
• jquerySwipeHandler.SWIPE_RIGHT
• jquerySwipeHandler.SWIPE_DOWN
• jquerySwipeHandler.SWIPE_UP
• jquerySwipeHandler.CLICK

<div id="container">
  Detects swipe left, right, top and down and blocks scroll
</div>

<div id="container2">
  Detects swipe left and right and allows scroll
</div>

jquerySwipeHandler.handleSwipe("#container", [
  jquerySwipeHandler.SWIPE_LEFT, 
  jquerySwipeHandler.SWIPE_RIGHT, 
  jquerySwipeHandler.SWIPE_DOWN, 
  jquerySwipeHandler.SWIPE_UP, 
  jquerySwipeHandler.CLICK
], function (direction) {
  console.log("swipe: ", direction);
});

jquerySwipeHandler.handleSwipe("#container2", [
  jquerySwipeHandler.SWIPE_LEFT, 
  jquerySwipeHandler.SWIPE_RIGHT, 
  jquerySwipeHandler.CLICK
], function (direction) {
  console.log("swipe2: ", direction);
});

Changelog:

2020-07-17

• preventing click detection for right mouse

---

This awesome jQuery plugin is developed by MichaelBreitung. For more Advanced Usages, please check the demo page or visit the official website.