Only enable `pause: hover` for non-touch browsers

Fixes #11967.

diff --git a/js/carousel.js b/js/carousel.js
index 65cc7b9129696b88a42613976126923fa564f338..4c9a1165ce4ed3e11787f0b8de0dc96da53f280e 100644 (file)
--- 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 (file)
--- 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')
+    })
+  })
 })