Fixes #2

Author: istvan-ujjmeszaros

bootstrap-dropdown-hover.jquery.json

@@ -8,7 +8,7 @@
         "hover",
         "ui"
     ],
-    "version": "1.0.3",
+    "version": "1.0.4",
     "author": {
         "name": "István Ujj-Mészáros",
         "url": "https://github.com/istvan-ujjmeszaros"

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-dropdown-hover",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "homepage": "http://www.virtuosoft.eu/code/bootstrap-dropdown-hover/",
   "authors": [
     "István Ujj-Mészáros <[email protected]>"

composer.json

@@ -4,7 +4,7 @@
     "keywords": ["bootstrap", "dropdown", "hover", "ui"],
     "description": "Open dropdown menus on mouse hover, the proper way.",
     "homepage": "http://www.virtuosoft.eu/code/bootstrap-dropdown-hover/",
-    "version": "1.0.3",
+    "version": "1.0.4",
     "authors": [
         {
             "name": "István Ujj-Mészáros",

dist/jquery.bootstrap-dropdown-hover.js

@@ -1,5 +1,5 @@
 /*
- *  Bootstrap Dropdown Hover - v1.0.3
+ *  Bootstrap Dropdown Hover - v1.0.4
  *  Open dropdown menus on mouse hover, the proper way.
  *  http://www.virtuosoft.eu/code/bootstrap-dropdown-hover/
  *
@@ -18,8 +18,8 @@
       },
       _hideTimeoutHandler,
       _hardOpened = false,
-      _mouseDetected = false,
-      _mouseEnterDetected = false;
+      _touchstartDetected = false,
+      _mouseDetected = false;
 
   // The actual plugin constructor
   function BootstrapDropdownHover(element, options) {
@@ -31,19 +31,22 @@
   }
 
   function bindEvents(dropdown) {
-    // we do not want to modify behavior if mouse is not present (touch screens),
-    // so we rely on mousemove to detect the mouse
-    $('body').one('mousemove.dropdownhover', function () {
-      // some touch devices are firing the mousemove event on the body, 
-      // but only after the mouseenter event happens on the dropdown toggle
-      if (!_mouseEnterDetected) {
+    $('body').one('touchstart.dropdownhover', function() {
+      _touchstartDetected = true;
+    });
+
+    $('body').one('mouseenter.dropdownhover', function() {
+      // touchstart fires before mouseenter on touch devices
+      if (!_touchstartDetected) {
         _mouseDetected = true;
       }
     });
 
     $('.dropdown-toggle, .dropdown-menu', dropdown.element.parent()).on('mouseenter.dropdownhover', function () {
-      // we need that for proper mouse detection
-      _mouseEnterDetected = true;
+      // seems to be a touch device
+      if(_mouseDetected && !$(this).is(':hover')) {
+        _mouseDetected = false;
+      }
 
       if (!_mouseDetected) {
         return;
@@ -104,6 +107,7 @@
     // seems that bootstrap binds the click handler twice after we reinitializing the plugin after a destroy...
     $('.dropdown-toggle, .dropdown-menu', dropdown.element.parent()).off('.dropdown');
     dropdown.element.off('.dropdownhover');
+    $('body').off('.dropdownhover');
   }
 
   BootstrapDropdownHover.prototype = {

dist/jquery.bootstrap-dropdown-hover.min.js

@@ -104,6 +104,7 @@ <h1>Bootstrap Dropdown Hover</h1>
         </div>
 
         <div class="col-xs-12 bs-example">
+<!--textarea id="log" style="display:block;height:200px;width:100%;"></textarea-->
           <p>Modify the behavior of the above two dropdowns</p>
 
           <div class="alert alert-danger">The plugin instance is destroyed, please reinitialize!</div>

index.html

@@ -9,7 +9,7 @@
     "url": "http://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover.git"
   },
   "homepage": "http://www.virtuosoft.eu/code/bootstrap-dropdown-hover/",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "devDependencies": {
     "grunt": "~0.4.1",
     "grunt-cli": "~0.1.13",

package.json

@@ -10,8 +10,8 @@
       },
       _hideTimeoutHandler,
       _hardOpened = false,
-      _mouseDetected = false,
-      _mouseEnterDetected = false;
+      _touchstartDetected = false,
+      _mouseDetected = false;
 
   // The actual plugin constructor
   function BootstrapDropdownHover(element, options) {
@@ -23,19 +23,22 @@
   }
 
   function bindEvents(dropdown) {
-    // we do not want to modify behavior if mouse is not present (touch screens),
-    // so we rely on mousemove to detect the mouse
-    $('body').one('mousemove.dropdownhover', function () {
-      // some touch devices are firing the mousemove event on the body, 
-      // but only after the mouseenter event happens on the dropdown toggle
-      if (!_mouseEnterDetected) {
+    $('body').one('touchstart.dropdownhover', function() {
+      _touchstartDetected = true;
+    });
+
+    $('body').one('mouseenter.dropdownhover', function() {
+      // touchstart fires before mouseenter on touch devices
+      if (!_touchstartDetected) {
         _mouseDetected = true;
       }
     });
 
     $('.dropdown-toggle, .dropdown-menu', dropdown.element.parent()).on('mouseenter.dropdownhover', function () {
-      // we need that for proper mouse detection
-      _mouseEnterDetected = true;
+      // seems to be a touch device
+      if(_mouseDetected && !$(this).is(':hover')) {
+        _mouseDetected = false;
+      }
 
       if (!_mouseDetected) {
         return;
@@ -96,6 +99,7 @@
     // seems that bootstrap binds the click handler twice after we reinitializing the plugin after a destroy...
     $('.dropdown-toggle, .dropdown-menu', dropdown.element.parent()).off('.dropdown');
     dropdown.element.off('.dropdownhover');
+    $('body').off('.dropdownhover');
   }
 
   BootstrapDropdownHover.prototype = {