在Bootstrap 3中启用触摸事件的推荐方法？
在Bootstrap 3中启用触摸事件的推荐方法？
提问于 2013-10-23 16:58:23
既然Bootstrap 3已经发布了，那么支持触控的推荐选项是什么呢？As before，虽然bootstrap.js应该是一个移动优先的框架，但它并没有太多的触控事件。
github上的I've found最后建议使用fastclick.js，但那是在v3.0发布之前。
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-12-10 06:06:26
我的建议是将Bootstrap与JQuery手机、TouchSwipe或Hammer.js一起使用。引导触摸轮播的一个示例可以在here中找到。
Stack Overflow用户
发布于 2013-12-14 01:41:29
开始在GitHub上开发另一个完全正常工作的Touch Carousel。这也包括拖动事件...
Stack Overflow用户
发布于 2014-05-02 22:26:57
尽管我相信bootstrap是一个css框架的笑话(特别是因为没有多级导航)，但如果你有选择的话，我可能会同意其他人的观点，使用一些不同的旋转木马。
根据我的经验，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>它在android和iphone上也很好用，而且我还允许在没有触控支持的浏览器中进行移动事件。
我希望它能帮上忙。
TomHre
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19537260
复制相关文章
相似问题
腾讯云开发者
