Problems with event bubbling when parent prevents it

[A-Kalkhoff]

When using jScrollPane in an Element which's parent stops event bubbling, jScrollPane fails to do two things:

• Release jspDrag on mouseup
• Register mouseup on click on jspTrack (initClickOnTrack())

I encountered these problems while using jScrollPane in Google Maps' Utility libary infobox.js. Neither was easy to work out a workaround while neither editing infobox.js nor jquery.jscrollpane.js.

Example definitions
marker.info.infowindowContent = $('#markerContainer).jScrollPane();
marker.info.infowindowContentApi = marker.info.infowindowContent.data('jsp');

Workaround: Release jspDrag on mouseup
While being the easier one to find the workaround, I am uncertain if it is possible to include this into jScrollPane.
I bound an mouseup-event to the Parent (marker.info.infowindowContent), calling:

• marker.info.infowindowContent.find('jspDrag').removeClass('jspActive')
• $('html').unbind('dragstart.jsp selectstart.jsp mousemove.jsp mouseup.jsp mouseleave.jsp');

Workaround: Register mouseup on click on jspTrack (initClickOnTrack())
This one was more tricky to find, yet is probably easier ti implement into jScrollPane:
Within a setTimeout I bound a mouseup-event to the jspTrack-Element, triggering a simple mouseup-event on the document:

window.setTimeout(function(){
    marker.info.infowindowContent.find('.jspTrack').bind('mouseup', triMapApp_map.domMouseUp);
},0);

The setTimeout was needed solely to put it on the event stack behind the element being added to the DOM, thus no delay is needed.

window.domMouseUp = function(){
    $(document).mouseup();
};

[vitch]

The problem with listening to a mouseup anywhere other than the document is that it doesn't deal with the situation where you click on the drag and move the mouse outside of it while dragging. Then the drag can appear "stuck" to the mouse pointer.

It may be worth binding cancelDrag to the mouseup as on verticalDrag here (as well as the HTML handler) here (and likewise for horizontalDrag) which might help as long as the user releases the mouse within the drag itself. Unfortunately I don't have time to do this myself but I would accept a pull request that did so if it seemed to improve the situation and didn't break the normal usage.

Is there a reason that infobox.js prevents the events from bubbling?

[A-Kalkhoff]

I didn't bind cancelDrag to horizontalTrack/verticalTrack as cancelDrag is insufficient for canceling the drag on that very element. I bound cancelDrag to the parameter "elem". Added comments describe which problem is tackled at which point.

[vitch]

Thanks for looking into this. I've added a comment on the commit.

Also, can you make sure the events are cleaned up properly (namespace them with .jsp like the other events in the plugin and make sure they are cleaned up in any unbind).

Thanks!

[A-Kalkhoff]

Namespaced the events properly now.
Unbound the event added in line 108 in destroy().
I'm not sure where to unbind the other two binds safely though – unbinding them in removeClickOnTrack() causes the problems to prevail. Would be happy about a hint as to where to safely unbind them.

[illuusio]

Is this still can on jQuery3