jQuery TouchSwipe插件在链接上不起作用? [英] jQuery TouchSwipe plugin doesn't work on links?

问题描述

我正在使用jQuery TouchSwipe插件.它在div上效果很好，但在链接上却根本不起作用.

Im using the jQuery TouchSwipe plugin. Its working great on divs but its not working at all on links.

我想要它，所以如果您点击或单击链接，将获得默认的链接行为.但是，如果您滑动，我希望触发javascript滑动，就好像该元素是一个div一样.

I want it so if you tap or click a link you get the default link behaviour. But if you swipe I want the javascript swipe to fire as if the element was a div.

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

推荐答案

真是个好问题.为了为您解决这个问题，我进入了源代码.您应该知道默认情况下禁用锚点滑动.

What a wonderful question. To solve this for you, I went into the source code. You should know that anchor swiping is disabled by default.

版本:1.5.0-添加了excludeElements，这是一个jquery选择器，用于指定不会触发滑动的子元素.默认情况下，这是一个选择，它删除所有表单，输入选择，按钮和锚元素( 默认值:

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

只需传入excludedElements选项，而无需添加定位标记，即可在链接上执行滑动操作:

Simply pass in the excludedElements option sans the anchor tag to make swiping work on links:

$("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，则将仅允许非常静态的鼠标单击，否则将解释滑动.

---

There is one more key to this puzzle. You must not set threshold: 0 as internally that will disable all tap/click events. Set threshold to anything higher than 0, or omit it completely. If you make it threshold: 1, it will permit only very still mouse clicks, else swipes will be interpreted.

我希望这是您想要的.

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

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

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

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

The .on("click", function(event) { handler must be the first handler in the jQuery event chain, so place all this code near the top of your page, ideally just below where jQuery is loaded.

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

这篇关于jQuery TouchSwipe插件在链接上不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！