jQuery 触摸和滑动

Question

我正在为移动设备创建 jquery 滑块。对于触摸和滑动，我使用的是touchSwipe 插件。

在空白区域滑动时它工作正常，但当我在锚链接上滑动时它不起作用。

这是我的 html 代码。

<article data-status="loaded" id="deals-most-popular" class="deals-tube deals-populate-region">
  <div class="col-1">
    <ul data-category="most-popular">
      <li itemtype="http://schema.org/Offer" itemscope=""> <a target="_blank" itemprop="url" href="http://staging.click.deals.shermanstravel.com/21486/102/florida-car-rentals-from-tampa-orlando-miami-more"> <span class="deal-price" itemprop="price"> <em> <sup>$</sup> 15+ </em> </span> <span class="deal-text" itemprop="name"> <strong>Florida</strong> Florida Car Rentals from Tampa, Orlando, Miami &amp; More </span> </a> </li>
      <li itemtype="http://schema.org/Offer" itemscope=""> <a target="_blank" itemprop="url" href="http://staging.click.deals.shermanstravel.com/114021/102/myrtle-beach-hotel-deals-vacation-packages-in-spring-w-extras"> <span class="deal-price" itemprop="price"> <em> <sup>$</sup> 30+ </em> </span> <span class="deal-text" itemprop="name"> <strong>Myrtle Beach</strong> Myrtle Beach Hotel Deals &amp; Vacation Packages in Spring w/Extras </span> </a> </li>
      <li itemtype="http://schema.org/Offer" itemscope=""> <a target="_blank" itemprop="url" href="http://staging.click.deals.shermanstravel.com/103392/102/fly-round-trip-to-cities-worldwide-on-emirates"> <span class="deal-price" itemprop="price"> <em> <sup>$</sup> 634+ </em> </span> <span class="deal-text" itemprop="name"> <strong>South America</strong> Fly Round-Trip to Cities Worldwide on Emirates </span> </a> </li>
      <li itemtype="http://schema.org/Offer" itemscope=""> <a target="_blank" itemprop="url" href="http://staging.click.deals.shermanstravel.com/37068/102/rome-florence-venice-7-nts-w-air-train-hotel"> <span class="deal-price" itemprop="price"> <em> <sup>$</sup> 1665+ </em> </span> <span class="deal-text" itemprop="name"> <strong>Italy</strong> Rome, Florence &amp; Venice: 7 Nts w/Air, Train &amp; Hotel </span> </a> </li>
      <li itemtype="http://schema.org/Offer" itemscope=""> <a target="_blank" itemprop="url" href="http://staging.click.deals.shermanstravel.com/37045/102/athens-istanbul-6-nights-w-flights-hotel"> <span class="deal-price" itemprop="price"> <em> <sup>$</sup> 1159+ </em> </span> <span class="deal-text" itemprop="name"> <strong>World</strong> Athens &amp; Istanbul: 6 Nights w/Flights &amp; Hotel </span> </a> </li>
    </ul>
  </div>
  <div class="col-1">
    <ul data-category="most-popular">
      <li itemtype="http://schema.org/Offer" itemscope=""> <a target="_blank" itemprop="url" href="http://staging.click.deals.shermanstravel.com/37053/102/london-paris-rome-9-nts-w-air-transfer-hotel"> <span class="deal-price" itemprop="price"> <em> <sup>$</sup> 1859+ </em> </span> <span class="deal-text" itemprop="name"> <strong>Europe</strong> London, Paris &amp; Rome: 9 Nts w/Air, Transfer &amp; Hotel </span> </a> </li>
      <li itemtype="http://schema.org/Offer" itemscope=""> <a target="_blank" itemprop="url" href="http://staging.click.deals.shermanstravel.com/37063/102/prague-vienna-budapest-7-nts-w-air-hotel"> <span class="deal-price" itemprop="price"> <em> <sup>$</sup> 1445+ </em> </span> <span class="deal-text" itemprop="name"> <strong>Europe</strong> Prague, Vienna &amp; Budapest: 7 Nts w/Air &amp; Hotel </span> </a> </li>
      <li itemtype="http://schema.org/Offer" itemscope=""> <a target="_blank" itemprop="url" href="http://staging.click.deals.shermanstravel.com/37060/102/barcelona-rome-6-nts-w-air-transfer-hotel"> <span class="deal-price" itemprop="price"> <em> <sup>$</sup> 1429+ </em> </span> <span class="deal-text" itemprop="name"> <strong>Europe</strong> Barcelona &amp; Rome: 6 Nts w/Air, Transfer &amp; Hotel </span> </a> </li>
      <li itemtype="http://schema.org/Offer" itemscope=""> <a target="_blank" itemprop="url" href="http://staging.click.deals.shermanstravel.com/108188/102/6-nights-at-the-bahamas-paradise-island-all-incl-resort-w-air"> <span class="deal-price" itemprop="price"> <em> <sup>$</sup> 859+ </em> </span> <span class="deal-text" itemprop="name"> <strong>Bahamas</strong> 6 Nights at the Bahamas Paradise Island All-Incl. Resort w/Air </span> </a> </li>
      <li itemtype="http://schema.org/Offer" itemscope=""> <a target="_blank" itemprop="url" href="http://staging.click.deals.shermanstravel.com/37064/102/barcelona-ibiza-6-nt-package-w-air-hotel"> <span class="deal-price" itemprop="price"> <em> <sup>$</sup> 1245+ </em> </span> <span class="deal-text" itemprop="name"> <strong>Spain</strong> Barcelona &amp; Ibiza 6-Nt Package w/Air &amp; Hotel </span> </a> </li>
    </ul>
  </div>
</article>

脚本

![$(function() {      
      //Enable swiping...
      $("#deals-most-popular").swipe( {
        //Generic swipe handler for all directions
        swipe:function(event, direction, distance, duration, fingerCount) {
          if(direction === "left"){
              $(this).cycle("next");
             // alert('left')
          } else if(direction === "right"){
              $(this).cycle("prev");
              //alert('right')
          }
        },
        //Default is 75px, set to 0 for demo so any distance triggers swipe
         threshold:0
      });
    });][3]

Answer 1

默认情况下，锚点（“a”）元素被排除在滑动之外（请参阅“excludedElements”属性）。

http://labs.rampinteractive.co.uk/touchSwipe/docs/symbols/%24.fn.swipe.defaults.html

您可以通过将该列表设置为更适合您的需要来使链接滑动，但是您可能需要处理未执行其本机“链接”操作的锚点（仅限 Android？）（可能使用“点击” （以前称为“点击”）处理程序）。

http://labs.rampinteractive.co.uk/touchSwipe/demos/Tap_vs_swipe.html

HTH，

安迪