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

Question

现在 Bootstrap 3 已经发布，启用触控的推荐选项是什么？和以前一样，bootstrap.js 中的触摸事件并不多，尽管它应该是一个移动优先的框架。

我在 github 上找到的最后一件事建议使用 fastclick.js，但那是在 v3.0 版本之前。

Answer 1

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

Answer 2

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

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

我希望它有所帮助。

汤姆赫尔