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() {
.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);
.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>