jQuery mobile swipe should not work on desktop - html

Question

I'm using Bootstrap's (3.3.5) Carousel to show a Slider on a page. Code is pretty simple and standard:
<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>
I was missing the option to swipe on mobile devices, so I added jQuery mobile 1.4.5 to get this function like this:
$(document).ready(function() {
$("#header-carousel").swiperight(function() {
$(this).carousel('prev');
});
$("#header-carousel").swipeleft(function() {
$(this).carousel('next');
});
});
So far it works on mobile and tablets. But it also works on desktops, so one can't select the caption without triggering the swipe-methods. Is there a possibility to deactivate this behaviour?

Answer 1

I would ask you to disable it only for those devices without Touch support. So for that, you can try this:
function isTouchSupported () {
try {
document.createEvent("TouchEvent");
touch = true;
} catch (e) {
touch = false;
}
return touch;
}
The same program can be written in another way too:
function isTouchSupported () {
return 'ontouchstart' in document.documentElement;
}
And after initializing, you can unbind the events:
if (!isTouchSupported())
$("#header-carousel").off("swiperight").off("swipeleft");
edit: added () to isTouchSupported-call
Self Proof Check:
On my desktop Google Chrome, using F12 Developer Tools:
On my mobile Google Chrome, using jsBin's console tab.