diff --git a/js/src/carousel.js b/js/src/carousel.js index 299aadeda..3350bdf55 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -12,6 +12,7 @@ import { getElementFromSelector, getTransitionDurationFromElement, isVisible, + isTouchEnabledDevice, reflow, triggerTransitionEnd, typeCheckConfig @@ -118,7 +119,7 @@ class Carousel extends BaseComponent { this._config = this._getConfig(config) this._indicatorsElement = SelectorEngine.findOne(SELECTOR_INDICATORS, this._element) - this._touchSupported = 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0 + this._touchSupported = isTouchEnabledDevice() || navigator.maxTouchPoints > 0 this._pointerEvent = Boolean(window.PointerEvent) this._addEventListeners() diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 4720ed1ab..5d208a86e 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -13,6 +13,7 @@ import { isElement, isVisible, isRTL, + isTouchEnabledDevice, noop, typeCheckConfig } from './util/index' @@ -181,10 +182,10 @@ class Dropdown extends BaseComponent { // empty mouseover listeners to the body's immediate children; // only needed because of broken event delegation on iOS // https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html - if ('ontouchstart' in document.documentElement && - !parent.closest(SELECTOR_NAVBAR_NAV)) { - [].concat(...document.body.children) - .forEach(elem => EventHandler.on(elem, 'mouseover', null, noop())) + if (isTouchEnabledDevice() && !parent.closest(SELECTOR_NAVBAR_NAV)) { + [].concat(...document.body.children).forEach(element => { + EventHandler.on(element, 'mouseover', null, noop) + }) } this._element.focus() @@ -381,9 +382,10 @@ class Dropdown extends BaseComponent { // If this is a touch-enabled device we remove the extra // empty mouseover listeners we added for iOS support - if ('ontouchstart' in document.documentElement) { - [].concat(...document.body.children) - .forEach(elem => EventHandler.off(elem, 'mouseover', null, noop())) + if (isTouchEnabledDevice()) { + [].concat(...document.body.children).forEach(element => { + EventHandler.off(element, 'mouseover', null, noop) + }) } toggles[i].setAttribute('aria-expanded', 'false') diff --git a/js/src/tooltip.js b/js/src/tooltip.js index df0f0c19c..1c45a9e89 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -16,6 +16,7 @@ import { getUID, isElement, isRTL, + isTouchEnabledDevice, noop, typeCheckConfig } from './util/index' @@ -298,9 +299,9 @@ class Tooltip extends BaseComponent { // empty mouseover listeners to the body's immediate children; // only needed because of broken event delegation on iOS // https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html - if ('ontouchstart' in document.documentElement) { + if (isTouchEnabledDevice()) { [].concat(...document.body.children).forEach(element => { - EventHandler.on(element, 'mouseover', noop()) + EventHandler.on(element, 'mouseover', noop) }) } @@ -355,9 +356,10 @@ class Tooltip extends BaseComponent { // If this is a touch-enabled device we remove the extra // empty mouseover listeners we added for iOS support - if ('ontouchstart' in document.documentElement) { - [].concat(...document.body.children) - .forEach(element => EventHandler.off(element, 'mouseover', noop)) + if (isTouchEnabledDevice()) { + [].concat(...document.body.children).forEach(element => { + EventHandler.off(element, 'mouseover', noop) + }) } this._activeTrigger[TRIGGER_CLICK] = false diff --git a/js/src/util/index.js b/js/src/util/index.js index 1bf9fe954..d5d3c6883 100644 --- a/js/src/util/index.js +++ b/js/src/util/index.js @@ -204,6 +204,8 @@ const defineJQueryPlugin = (name, plugin) => { }) } +const isTouchEnabledDevice = () => 'ontouchstart' in document.documentElement + export { TRANSITION_END, getUID, @@ -221,5 +223,6 @@ export { getjQuery, onDOMContentLoaded, isRTL, - defineJQueryPlugin + defineJQueryPlugin, + isTouchEnabledDevice }