fix hover on touch devices

gilbarbara · Dec 18, 2015 · 6924aeb · 6924aeb
1 parent eb7742a
commit 6924aeb
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 9 deletions.
diff --git a/lib/scripts/Beacon.js b/lib/scripts/Beacon.js
@@ -1,6 +1,8 @@
 var React    = require('react'),
     hexToRGB = require('./utils.js').hexToRgb;
 
+var isTouch = 'ontouchstart' in window || navigator.msMaxTouchPoints;
+
 var Beacon = React.createClass({
     displayName: 'JoyrideBeacon',
     propTypes: {
@@ -70,8 +72,8 @@ var Beacon = React.createClass({
                     href: '#',
                     className: 'joyride-beacon',
                     style: styles.beacon,
-                    onClick: props.eventType === 'click' ? props.onTrigger : null,
-                    onMouseEnter: props.eventType === 'hover' ? props.onTrigger : null
+                    onClick: props.eventType === 'click' || isTouch ? props.onTrigger : null,
+                    onMouseEnter: props.eventType === 'hover' && !isTouch ? props.onTrigger : null
                 },
                 React.createElement('span', {
                     className: 'inner',

diff --git a/lib/scripts/Component.js b/lib/scripts/Component.js
@@ -15,7 +15,8 @@ var defaultState = {
     },
     listeners    = {
         tooltips: {}
-    };
+    },
+    isTouch      = 'ontouchstart' in window || navigator.msMaxTouchPoints;
 
 var Component = React.createClass({
     displayName: 'Joyride',
@@ -264,20 +265,22 @@ var Component = React.createClass({
 
         el.dataset.tooltip = JSON.stringify(data);
 
-        if (eventType === 'hover') {
+        if (eventType === 'hover' && !isTouch) {
             listeners.tooltips[key] = { event: 'mouseenter', cb: this._onTooltipTrigger };
             listeners.tooltips[key + 'mouseleave'] = { event: 'mouseleave', cb: this._onTooltipTrigger };
-            listeners.tooltips[key + 'click'] = { event: 'click', cb: function (e) {
-                e.preventDefault();
-            } };
+            listeners.tooltips[key + 'click'] = {
+                event: 'click', cb: function (e) {
+                    e.preventDefault();
+                }
+            };
 
             el.addEventListener('mouseenter', listeners.tooltips[key].cb);
             el.addEventListener('mouseleave', listeners.tooltips[key + 'mouseleave'].cb);
             el.addEventListener('click', listeners.tooltips[key + 'click'].cb);
         }
         else {
-            listeners.tooltips[key] = { event: eventType, cb: this._onTooltipTrigger };
-            el.addEventListener(eventType, listeners.tooltips[key].cb);
+            listeners.tooltips[key] = { event: 'click', cb: this._onTooltipTrigger };
+            el.addEventListener('click', listeners.tooltips[key].cb);
         }
     },