Fix Issue 181: labelsDiv flashes when the mouse hovers over it.

diff --git a/dygraph-utils.js b/dygraph-utils.js
index 1d1623f..d2051bf 100644 (file)
--- a/dygraph-utils.js
+++ b/dygraph-utils.js
@@ -1212,3 +1212,20 @@ Dygraph.detectLineDelimiter = function(data) {
 
   return null;
 };
+
+/**
+ * Is one element contained by another?
+ * @param {Element} containee The contained element.
+ * @param {Element} container The container element.
+ * @return {boolean} Whether containee is inside (or equal to) container.
+ * @private
+ */
+Dygraph.isElementContainedBy = function(containee, container) {
+  if (container === null || containee === null) {
+    return false;
+  }
+  while (containee && containee !== container) {
+    containee = containee.parentNode;
+  }
+  return (containee === container);
+};

diff --git a/dygraph.js b/dygraph.js
index 3de6776..c00a7b1 100644 (file)
--- a/dygraph.js
+++ b/dygraph.js
@@ -963,11 +963,19 @@ Dygraph.prototype.createInterface_ = function() {
   };
 
   this.mouseOutHandler_ = function(e) {
-    dygraph.mouseOut_(e);
+    // The mouse has left the chart if:
+    // 1. e.target is inside the chart
+    // 2. e.relatedTarget is outside the chart
+    var target = e.target || e.fromElement;
+    var relatedTarget = e.relatedTarget || e.toElement;
+    if (Dygraph.isElementContainedBy(target, dygraph.graphDiv) &&
+        !Dygraph.isElementContainedBy(relatedTarget, dygraph.graphDiv)) {
+      dygraph.mouseOut_(e);
+    }
   };
 
+  this.addEvent(window, 'mouseout', this.mouseOutHandler_);
   this.addEvent(this.mouseEventElement_, 'mousemove', this.mouseMoveHandler_);
-  this.addEvent(this.mouseEventElement_, 'mouseout', this.mouseOutHandler_);
 
   // Don't recreate and register the resize handler on subsequent calls.
   // This happens when the graph is resized.
@@ -1005,9 +1013,9 @@ Dygraph.prototype.destroy = function() {
   this.registeredEvents_ = [];
 
   // remove mouse event handlers (This may not be necessary anymore)
-  Dygraph.removeEvent(this.mouseEventElement_, 'mouseout', this.mouseOutHandler_);
+  Dygraph.removeEvent(window, 'mouseout', this.mouseOutHandler_);
   Dygraph.removeEvent(this.mouseEventElement_, 'mousemove', this.mouseMoveHandler_);
-  Dygraph.removeEvent(this.mouseEventElement_, 'mousemove', this.mouseUpHandler_);
+  Dygraph.removeEvent(this.mouseEventElement_, 'mouseup', this.mouseUpHandler_);
 
   // remove window handlers
   Dygraph.removeEvent(window,'resize',this.resizeHandler_);