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

Question

现在Bootstrap 3已启用，启用触摸的推荐选项是什么？ 和以前一样 ，bootstrap.js中没有很多触摸事件，尽管它应该是一个移动的第一个框架。

我在github 上发现的最后一件事建议使用fastclick.js，但那是在v3.0发布之前。

Answer 1

我的建议是使用Bootstrap和JQuery mobile，TouchSwipe或Hammer.js。 可以在此处找到自举触摸旋转木马的示例。

Answer 2

开始在GitHub上使用另一个完全正常工作的Touch Carousel 。 这还包括拖动事件......

Answer 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上也适用于我，加上我允许在没有触摸支持的浏览器中移动事件。

我希望它有所帮助。

TomHre