Fixed #841: messing up clientY and pageY in event handling

lib/timeline/Graph2d.js

@@ -266,10 +266,10 @@ Graph2d.prototype.getItemRange = function() {
  *                  The event happened, whether clicked on an item, etc.
  */
 Graph2d.prototype.getEventProperties = function (event) {
-  var pageX = event.center ? event.center.x : event.pageX;
-  var pageY = event.center ? event.center.y : event.pageY;
-  var x = pageX - util.getAbsoluteLeft(this.dom.centerContainer);
-  var y = pageY - util.getAbsoluteTop(this.dom.centerContainer);
+  var clientX = event.center ? event.center.x : event.clientX;
+  var clientY = event.center ? event.center.y : event.clientY;
+  var x = clientX - util.getAbsoluteLeft(this.dom.centerContainer);
+  var y = clientY - util.getAbsoluteTop(this.dom.centerContainer);
   var time = this._toTime(x);
 
   var customTime = CustomTime.customTimeFromTarget(event);
@@ -299,8 +299,8 @@ Graph2d.prototype.getEventProperties = function (event) {
   return {
     event: event,
     what: what,
-    pageX: pageX,
-    pageY: pageY,
+    pageX: event.srcEvent ? event.srcEvent.pageX : event.pageX,
+    pageY: event.srcEvent ? event.srcEvent.pageY : event.pageY,
     x: x,
     y: y,
     time: time,

lib/timeline/Range.js

@@ -491,7 +491,7 @@ Range.prototype._onMouseWheel = function(event) {
     }
 
     // calculate center, the date to zoom around
-    var pointer = getPointer({x: event.pageX, y: event.pageY}, this.body.dom.center);
+    var pointer = getPointer({x: event.clientX, y: event.clientY}, this.body.dom.center);
     var pointerDate = this._pointerToDate(pointer);
 
     this.zoom(scale, pointerDate, delta);

lib/timeline/Timeline.js

@@ -389,10 +389,10 @@ Timeline.prototype.getItemRange = function() {
  *                  The event happened, whether clicked on an item, etc.
  */
 Timeline.prototype.getEventProperties = function (event) {
-  var pageX = event.center ? event.center.x : event.pageX;
-  var pageY = event.center ? event.center.y : event.pageY;
-  var x = pageX - util.getAbsoluteLeft(this.dom.centerContainer);
-  var y = pageY - util.getAbsoluteTop(this.dom.centerContainer);
+  var clientX = event.center ? event.center.x : event.clientX;
+  var clientY = event.center ? event.center.y : event.clientY;
+  var x = clientX - util.getAbsoluteLeft(this.dom.centerContainer);
+  var y = clientY - util.getAbsoluteTop(this.dom.centerContainer);
 
   var item  = this.itemSet.itemFromTarget(event);
   var group = this.itemSet.groupFromTarget(event);
@@ -419,8 +419,8 @@ Timeline.prototype.getEventProperties = function (event) {
     item: item ? item.id : null,
     group: group ? group.groupId : null,
     what: what,
-    pageX: pageX,
-    pageY: pageY,
+    pageX: event.srcEvent ? event.srcEvent.pageX : event.pageX,
+    pageY: event.srcEvent ? event.srcEvent.pageY : event.pageY,
     x: x,
     y: y,
     time: time,

lib/timeline/component/ItemSet.js

@@ -1585,23 +1585,23 @@ ItemSet.prototype.itemFromTarget = function(event) {
  * @return {Group | null} group
  */
 ItemSet.prototype.groupFromTarget = function(event) {
-  var pageY = event.center ? event.center.y : event.pageY;
+  var clientY = event.center ? event.center.y : event.clientY;
   for (var i = 0; i < this.groupIds.length; i++) {
     var groupId = this.groupIds[i];
     var group = this.groups[groupId];
     var foreground = group.dom.foreground;
     var top = util.getAbsoluteTop(foreground);
-    if (pageY > top && pageY < top + foreground.offsetHeight) {
+    if (clientY > top && clientY < top + foreground.offsetHeight) {
       return group;
     }
 
     if (this.options.orientation.item === 'top') {
-      if (i === this.groupIds.length - 1 && pageY > top) {
+      if (i === this.groupIds.length - 1 && clientY > top) {
         return group;
       }
     }
     else {
-      if (i === 0 && pageY < top + foreground.offset) {
+      if (i === 0 && clientY < top + foreground.offset) {
         return group;
       }
     }

test/timeline_groups.html

@@ -28,6 +28,8 @@
 
   </style>
 
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
+
   <script src="../dist/vis.js"></script>
   <link href="../dist/vis.css" rel="stylesheet" type="text/css" />
 <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
@@ -52,6 +54,7 @@
 <br>
 
 <div id="visualization"></div>
+<div style="height: 1000px;"></div><!-- for testing vertical scroll on touch devices-->
 
 <script>
   var moment = vis.moment;
@@ -189,11 +192,15 @@
     console.log('rangechanged', range);
   });
   */
-
+//
   timeline.on('click', function (props) {
     console.log('click', props);
   });
 
+  $(container).click(function (event) {
+    console.log('click jquery', timeline.getEventProperties(event));
+  });
+
   timeline.on('doubleClick', function (props) {
     console.log('doubleClick', props);
   });