jQuery TouchSwipe插件在链接上不起作用？

Question

我使用了jQuery TouchSwipe插件。它在div上运行良好，但对于链接却一点也不起作用。

我希望当您点击链接时，可以获得默认的链接行为。但如果您滑动屏幕，我希望JavaScript滑动像处理div元素一样被触发。

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

- Evanss

---

也许这个更适合 > https://github.com/benmajor/jQuery-Touch-Events 由我亲自编写 :) - BenM

@BenM - 谢谢你。你的是最好的，也可能是唯一维护的jQuery插件！ - ppetree

Answer 1

太棒了，这是一个很好的问题。为了解决这个问题，我查看了源代码。你应该知道，锚点滑动在默认情况下是禁用的。

版本：1.5.0 - 添加了排除元素（excludedElements），它是一个 jQuery 选择器，指定不触发滑动的子元素。默认情况下，这是一个选择器，用于移除所有表单、输入选择、按钮和锚点元素（源代码）。

默认值：

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

只需传递不包含锚点标签的excludedElements选项即可使滑动工作在链接上：

$("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 设置为任何大于零的数字，或者干脆省略它。如果将其设置为threshold: 1，则只会允许非常静止的鼠标点击，否则会被视为滑动操作。

希望这能解决你的问题。

---

Demo 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>

- Drakes

---

这个功能可以正常工作，但是当我拖动链接时它会被触发。我需要在点击或轻触链接时才触发它，而不是在拖动时触发。您能否详细解答一下？谢谢。 - Evanss

这种情况通常发生在“混淆”的滑动（或拖动）操作中。最简单的解决方案是设置 threshold:1，这样只有在静止点击时才会触发点击事件。我已经更新了上面的代码片段。希望这正是您所需要的。 - Drakes

$(".main-menu a").swipe({ swipeRight: function(event, direction, distance, duration, fingerCount, fingerData) { $('body').removeClass('oc-menu-open'); // event.preventDefault(); }, excludedElements: ".noSwipe", threshold: 100 }); - Evanss

对我来说它仍然不起作用。我尝试添加了一个事件prevent default（请参见上面的代码）。 - Evanss

是的，但那不就是你所使用的 e.preventDefault(); 吗？ - Evanss

让我们在聊天中继续这个讨论。 - Evanss

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. 刚刚注意到这篇文章已经很老了，希望无论如何它都能对你有所帮助，哈哈

- Loukas Avramidis

---

我觉得你误解了我的意思。我已经在页面上有HTML链接了。当你点击该链接时，我希望它按照默认行为被跟踪。但是，当你滑动链接时，我需要执行一些JavaScript代码。 - Evanss

所以，如果您单击链接，它应该按原样工作。但是，如果您滑动它，执行其他操作？这不就是您的意思吗？因为这就是我在示例中所做的。只是我没有确切地使用链接... 为了澄清，您必须添加location.href ='desired.html'才能使其像链接一样工作。 - Loukas Avramidis

是的，这就是我想做的。然而，我已经在HTML中有了链接，并且由于许多最佳实践原因，我不想使这些链接依赖于JavaScript，就像您的解决方案一样。 - Evanss

是的，我也这么想。为了以防万一，我会进一步研究一下，无论如何祝你好运。 - Loukas Avramidis