jQuery移动滑动不应该在桌面上工作

Question

我使用Bootstrap（3.3.5）Carousel在页面上显示Slider。代码非常简单和标准：

<div id="header-carousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="pull-right carousel-indicators">
        <li data-target="#header-carousel" data-slide-to="0" class="active"></li>
        <li data-target="#header-carousel" data-slide-to="1"></li>
    </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <article class="item active" style="background-image:url(foo.jpg);">
            <div class="carousel-caption">
                <h1>FOO</h1>
                <h2>Caption</h2>
            </div>
        </article>
        <article class="item" style="background-image:url(bar.jpg);">
            <div class="carousel-caption">
                <h1>BAR</h1>
                <h2>Caption</h2>
            </div>
        </article>
    </div>
</div>

我错过了在移动设备上滑动的选项，所以我添加了jQuery mobile 1.4.5来获得这样的功能：

$(document).ready(function() {
    $("#header-carousel").swiperight(function() {
        $(this).carousel('prev');
    });
    $("#header-carousel").swipeleft(function() {
        $(this).carousel('next');
    });
});

到目前为止，它适用于手机和平板电脑。但它也适用于台式机，因此无需触发滑动方法即可选择标题。是否有可能停用此行为？

Answer 1

我会要求您仅为没有Touch支持的设备禁用它。所以，你可以试试这个：

function isTouchSupported () {
  try {  
    document.createEvent("TouchEvent");
    touch = true;
  } catch (e) {
    touch = false;
  }
  return touch;
}

同样的程序也可以用另一种方式编写：

function isTouchSupported () {
  return 'ontouchstart' in document.documentElement;
}

初始化后，您可以取消绑定事件：

if (!isTouchSupported())
  $("#header-carousel").off("swiperight").off("swipeleft");

修改将()添加到isTouchSupported - 致电

自我检查：

在我的桌面版Google Chrome上，使用F12开发者工具：

在我的移动版Google Chrome上，使用jsBin的控制台标签。