twitter-bootstrap 在 Bootstrap 3 中启用触摸事件的推荐方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19537260/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Recommended way to enable touch events in Bootstrap 3?
提问by conradj
Now that Bootstrap 3 is out, what is the recommended option for enabling touch? As before, there aren't many touch events in the bootstrap.js, though it is supposed to be a mobile first framework.
现在 Bootstrap 3 已经发布，启用触摸的推荐选项是什么？和以前一样，bootstrap.js 中的触摸事件并不多，尽管它应该是一个移动优先的框架。
The last thing I've foundon github suggests using fastclick.js, but that was before the v3.0 release.
采纳答案by theannouncer
回答by ixisio
Start working on another fully working Touch Carouselon GitHub. This also includes drag events...
开始在 GitHub上开发另一个完全可用的Touch Carousel。这也包括拖动事件...
回答by tomhre
Despite I believe bootstrap is a joke of a css framework (especially due to no multileveled navigation), I would probably agree with others to go with some different carousel if you have a choice.
尽管我认为 bootstrap 是 css 框架的一个笑话（尤其是由于没有多级导航），但如果您有选择，我可能会同意其他人使用一些不同的轮播。
From my experience JQuery mobile will work rather smoothly but my site was not built alongside jquery mobile and the css belonging to it really messed the things up.
根据我的经验，JQuery mobile 会运行得相当顺利，但我的网站不是与 jquery mobile 一起构建的，而且属于它的 css 确实把事情搞砸了。
<script>
$(document).ready(function() {
$('.carouselresp').carousel({'data-interval': 6000, 'data-pause': "hover"});
var clicking = false;
var currentMousePos = 0;
var newMousePos = 0;
$('.carouselresp img').on('mousedown', function(event) {
clicking = true;
currentMousePos = event.pageX;
});
$('.carouselresp img').on('touchstart', function(event) {
clicking = true;
var touchstart = event.originalEvent.touches[0];
currentMousePos = touchstart.pageX;
});
$(document).on('mouseup', function(event) {
clicking = false;
});
$('.carouselresp img').on('touchend', function(event) {
clicking = false;
});
$(document).on('mousemove', function(event) {
if (!clicking) {
return;
}else {
if (event.pageX < currentMousePos) {
if ((currentMousePos - event.pageX) > 50) {
$('.carouselresp').carousel('next');
clicking = false;
}
} else {
if ((event.pageX - currentMousePos) > 50) {
$('.carouselresp').carousel('prev');
clicking = false;
}
}
}
});
$('.carouselresp img').on('touchmove', function(event) {
var touch = event.originalEvent.touches[0];
if (!clicking) {
return;
}else {
if (touch.pageX < currentMousePos) {
if ((currentMousePos - touch.pageX) > 50) {
$('.carouselresp').carousel('next');
clicking = false;
}
} else {
if ((touch.pageX - currentMousePos) > 50) {
$('.carouselresp').carousel('prev');
clicking = false;
}
}
}
event.preventDefault();
});
});
</script>
It works fine for me on android and iphone too, plus I am allowing the move event in browsers with no touch support.
它对我来说在 android 和 iphone 上也很好用，而且我允许在没有触摸支持的浏览器中进行移动事件。
I hope it helped.
我希望它有所帮助。
TomHre
汤姆·雷
