jQuery TouchSwipe plugin doesn't work on links?

Question

Im using the jQuery TouchSwipe plugin. Its working great on divs but its not working at all on links.

I want it so if you tap or click a link you get the default link behaviour. But if you swipe I want the javascript swipe to fire as if the element was a div.

https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

Answer 1

What a wonderful question. To solve this for you, I went into the source code. You should know that anchor swiping is disabled by default.

version: 1.5.0 - Added excludedElements, a jquery selector that specifies child elements that do NOT trigger swipes. By default, this is one select that removes all form, input select, button and anchor elements (source).

Defaults:

excludedElements:"label, button, input, select, textarea, a, .noSwipe"

Simply pass in the excludedElements option sans the anchor tag to make swiping work on links:

$("a").swipe({
  // Generic swipe handler for all directions
  swipe: function(event, direction) {
    $(this).text("You swiped " + direction);
  },
  excludedElements: "label, button, input, select, textarea, .noSwipe"
});

---

There is one more key to this puzzle. You must not set threshold: 0 as internally that will disable all tap/click events. Set threshold to anything higher than 0, or omit it completely. If you make it threshold: 1, it will permit only very still mouse clicks, else swipes will be interpreted.

I hope this is what you are looking for.

---

Demo 1 - Swipe detected after finger/mouse up

$(function() {
  // Enable swiping...
  $(".test").swipe({
    // Generic swipe handler for all directions
    swipe: function(event, direction) {
      $(this).text("You swiped " + direction);
    },
    excludedElements: "label, button, input, select, textarea, .noSwipe",
    threshold:1
  });

  // Stackoverflow disables snippets opening links, so this captures clicks for a demo
  $(".test").on("click", function(e){
    alert($(this)[0].nodeName + " was clicked");
  });
});

.test {font-size: 48px;}

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script><script src="http://labs.rampinteractive.co.uk/touchSwipe/jquery.touchSwipe.min.js"></script><a href="http://google.com" target="_blank" class="test">Please swipe me</a><br><br><div class="test">Please swipe me</div>

---

Demo 2 - Swipe detected after a threshold

This version will detect a swipe after the finger/mouse has swept over threshold pixels before releasing the finger/mouse. This method works by detecting a swipe and setting some data in the link which is read by the first click handler which then blocks one click event propagation.

The .on("click", function(event) { handler must be the first handler in the jQuery event chain, so place all this code near the top of your page, ideally just below where jQuery is loaded.

$(function() {
  $(".test").swipe({
    swipe: function(event, direction) {
      $(this).text("You swiped " + direction);
    },
    swipeStatus: function(event, phase) {
      var $this = $(this);
      $this.data("stopclick", true); // Signal a temporarily click block
      if(phase === $.fn.swipe.phases.PHASE_CANCEL) {
        // Swipe was canceled, so unblock click handers
        $this.data("stopclick", false);
      }
    },
    excludedElements: "label, button, input, select, textarea, .noSwipe",
    threshold:10,
    triggerOnTouchEnd: false
  })
  .on("click", function(event) {
    // Prevent click event propogation for one click 
    var $this = $(this);
    if($this.data("stopclick") === true) {
       event.stopImmediatePropagation();
       event.preventDefault();
       $this.data("stopclick", false); // Restore click propogation
    }
  });
  
  // Stackoverflow disables snippets opening links, so this captures clicks for a demo
  $(".test").on("click", function(e){
    alert($(this)[0].nodeName + " was clicked");
  });
});

.test {font-size: 48px;}

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script><script src="http://labs.rampinteractive.co.uk/touchSwipe/jquery.touchSwipe.min.js"></script><a href="http://google.com" target="_blank" class="test">Please swipe me</a><br><br><div class="test">Please swipe me</div>