diff --git a/js/carousel.js b/js/carousel.js index 65cc7b9129696b88a42613976126923fa564f338..4c9a1165ce4ed3e11787f0b8de0dc96da53f280e 100644 --- a/js/carousel.js +++ b/js/carousel.js @@ -23,7 +23,7 @@ this.$active = this.$items = null - this.options.pause == 'hover' && this.$element + this.options.pause == 'hover' && !('ontouchstart' in document.documentElement) && this.$element .on('mouseenter.bs.carousel', $.proxy(this.pause, this)) .on('mouseleave.bs.carousel', $.proxy(this.cycle, this)) } diff --git a/js/tests/unit/carousel.js b/js/tests/unit/carousel.js index 3f9e61a349cf89d1f6343e7f3d8dab626ff13748..64d21446280b3965a9a1560a8e47494f01c2a8a7 100644 --- a/js/tests/unit/carousel.js +++ b/js/tests/unit/carousel.js @@ -398,4 +398,26 @@ $(function () { strictEqual($template.find('.item')[1], $template.find('.active')[0], 'second item active') }) + + test('should only add mouseenter and mouseleave listeners when not on mobile', function () { + var isMobile = 'ontouchstart' in document.documentElement + var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false" data-pause="hover">' + + '<div class="carousel-inner">' + + '<div id="first" class="item active">' + + '<img alt="">' + + '</div>' + + '<div id="second" class="item">' + + '<img alt="">' + + '</div>' + + '<div id="third" class="item">' + + '<img alt="">' + + '</div>' + + '</div>' + + '</div>' + var $template = $(templateHTML).bootstrapCarousel() + + $.each(['mouseover', 'mouseout'], function (i, type) { + strictEqual(type in $._data($template[0], 'events'), !isMobile, 'does' + (isMobile ? ' not' : '') + ' listen for ' + type + ' events') + }) + }) })