在 Bootstrap 3 中启用触摸事件的推荐方法？答案

【问题标题】：Recommended way to enable touch events in Bootstrap 3?在 Bootstrap 3 中启用触摸事件的推荐方法？
【发布时间】：2013-10-23 08:58:23
【问题描述】：

既然 Bootstrap 3 已经发布，那么启用触控的推荐选项是什么？ As before，bootstrap.js 中的触摸事件并不多，虽然它应该是一个移动优先的框架。

最后一个I've found github 建议使用fastclick.js，但那是在v3.0 发布之前。

【问题讨论】：

标签： javascript twitter-bootstrap mobile touch

【解决方案1】：

我的建议是将 Bootstrap 与 JQuery mobile、TouchSwipe 或 Hammer.js 一起使用。可以在here 找到引导触摸轮播的示例。

【讨论】：

我本来想问更多关于什么/如何使用 JQuery Mobile，因为我不愿添加另一个 JS 框架，但您的博客文章更详细 - 谢谢！
直到现在我才听说过 TouchSwipe，所以我试了一下。经过几分钟的实验，我发现 TouchSwipe 与 Bootstrap 集成得很好，使用简单，而且非常轻量级。很棒的推荐！

【解决方案2】：

开始在 GitHub 上开发另一个完全可用的 Touch Carousel。这也包括拖动事件...

【讨论】：

【解决方案3】：

尽管我认为 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 上也适用于我，而且我允许在不支持触摸的浏览器中移动事件。

希望对你有所帮助。

汤姆赫尔

【讨论】：