Html jQuery mobile swipe不应在桌面上工作
我使用Bootstrap的(3.3.5)旋转木马在页面上显示滑块。代码非常简单和标准:Html jQuery mobile swipe不应在桌面上工作,html,twitter-bootstrap,jquery-mobile,twitter-bootstrap-3,carousel,Html,Twitter Bootstrap,Jquery Mobile,Twitter Bootstrap 3,Carousel,我使用Bootstrap的(3.3.5)旋转木马在页面上显示滑块。代码非常简单和标准: <div id="header-carousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="pull-right carousel-indicators"> <li data-target="#header-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>
到目前为止,它适用于手机和平板电脑。但它也适用于台式机,因此,如果不触发滑动方法,就无法选择标题。是否有可能停用此行为?我要求您仅对不支持触摸的设备禁用此行为。因此,您可以尝试以下方法:
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");
编辑:将()
添加到iTouchSupported
-调用
自我验证检查:
在我的桌面Google Chrome上,使用F12开发者工具:
在我的手机Google Chrome上,使用jsBin的控制台选项卡
@Sergej随时都可以。谢谢你让我有这样的事情存在<代码>:)
if (!isTouchSupported())
$("#header-carousel").off("swiperight").off("swipeleft");