jQuery TouchSwipe 插件不适用于链接？

Question

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

我想要这样，如果您点击或单击链接，您将获得默认的链接行为。但是如果你滑动，我希望 javascript 滑动能够像元素是 div 一样触发。

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

Answer 1

多么精彩的问题啊。为了给你解决这个问题，我进入了源代码。您应该知道默认情况下 anchor 滑动是禁用的。

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).

默认值:

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

只需传入 excludedElements 选项(不带 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 - 在达到阈值后检测到滑动

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

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