Question

我正在使用jQuery TouchSwipe插件。它在div上工作得很好，但它在链接上根本不起作用。

我希望如此，如果点击或点击链接，您将获得默认的链接行为。但是，如果你刷卡我想要javascript滑动，就像元素是一个div一样。

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

Answer 1

多么棒的问题。为了解决这个问题，我进入了源代码。您应该知道默认情况下锚点滑动已禁用。

version：1.5.0 - 添加了excludedElements，一个jquery选择器，指定不触发滑动的子元素。默认情况下，这是一个删除所有表单，输入选择，按钮和锚元素（source）的选项。

<强>默认值：

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

只需传递excludedElements选项sans the anchor标签即可在链接上轻扫：

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

这个难题还有一个关键。您不得在内部设置threshold: 0，以禁用所有点按/点击事件。将threshold设置为高于0的任何值，或完全省略它。如果你使它threshold: 1，它只允许鼠标点击，否则将解释滑动。

我希望这就是你要找的东西。

演示1 - 手指/鼠标向上检测到滑动

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

演示2 - 在阈值

之后检测到滑动

在释放手指/鼠标之前，此手指/鼠标扫过threshold像素后，此版本将检测到滑动。此方法的工作原理是检测滑动并在链接中设置一些data，该链接由第一个单击处理程序读取，然后阻止一个单击事件传播。

.on("click", function(event) {处理程序必须是jQuery事件链中的第一个处理程序，因此将所有这些代码放在页面顶部附近，理想情况下位于jQuery加载的位置。

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

这不是最佳选择，但您可以使用任何具有类似于链接样式的元素，并像这样处理方向参数。

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

以下是一个工作示例https://jsfiddle.net/q3gnt8s5/8/

PS。哈哈注意到这篇文章有多久了，希望它能以某种方式使用，哈哈

jQuery TouchSwipe插件不适用于链接？

2 个答案:

演示1 - 手指/鼠标向上检测到滑动

演示2 - 在阈值