Scrollbar not stopping when custom events are used in Highchart

Question

I'm using highchart to display some data using column stacks , point markers and a highstock scrollbar. I also added click event on point to display other data with highslide popup effect in this way:

//click function
  click: function (e) {
  hs.htmlExpand(null, {
  pageOrigin: {
  x: e.pageX || e.clientX,
  y: e.pageY || e.clientY
  },
  headingText: this.series.name,
  maincontentText: this.x + '(x) <br/> ' +
  this.y + ' (y)' + ' <br/> ',
  width: 200
  });
}

When the scrollbar is moved in the right direction so that the yellow column stack disappear (x > 2580) it become uncontrollable. The scrollbar keep moving and doesn't stop. From that moment on, the scrollbar cannot be stopped unless it comes back in the left direction to values with x < 2580.

This bug is related to the usage of custom events. If we remove the related line

script src="customEvents.js" type="text/javascript"></script

the scrollbar works but the click event doesn't.

The script can be found here: http://jsfiddle.net/vb77a6tk/3/