JQuery TouchSwipe plugin not working with links?

Question

Im using jQuery TouchSwipe plugin. It works fine on divs, but doesn't work on links at all.

I want this to happen if you click or click on the link that you got by default. But if you swipe your finger, I want javascript to run as if this element were 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 binding is disabled by default.

version: 1.5.0 - Added excludedElements, a jquery selector that specifies children that DO NOT run swipes. By default, this is one element that deletes the entire form, enter button, button, and snap elements ( source ).

The default value is:

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

Just go to the excludedElements option without the anchor tag to get links to work:

 $("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 another key to this riddle. You should not set threshold: 0 as internally, which will disable all click / click events. Set threshold to anything above 0 or completely lower. If you do this threshold: 1 , it will only allow very quick mouse clicks, otherwise swipes will be interpreted.

Hope this is what you are looking for.

---

Demo 1 - Swipe up / down on the mouse

 $(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 the screen after the threshold

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

The .on("click", function(event) { handler should be the first handler in the jQuery event chain, so put all this code at the top of the page, ideally just below where jQuery loads.

 $(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> 

Answer 2

This is not optimal, but you can use any element with a style similar to the link style and handle this direction parameter.

 $("#swipable").swipe( { swipe:function(event, direction, distance, duration, fingerCount, fingerData) { if (direction == null) { location.href = 'somewhere.html' } else { // Do something else... } }, threshold:0 }); 

Here is a working example https://jsfiddle.net/q3gnt8s5/8/

PS. Just noticed how old this post is, hope it will be some kind of use anyway, haha