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

Question

我正在使用 Bootstrap 的 (3.3.5) Carousel 在页面上显示滑块。代码非常简单和标准：

<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

我会要求您仅对那些不支持触控的设备禁用它。所以为此，你可以试试这个：

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

自我证明检查：

在我的桌面谷歌浏览器上，使用 F12 开发者工具：

在我的移动 Google Chrome 上，使用 jsBin 的控制台选项卡。