When implementing a click event outside of a "popup" using the LinkedIn Hopscotch wrapper for GWT, one challenge arises. The desired functionality is for the popup to hide when the user clicks outside of it (.hopscotch-bubble-container). This currently works by calling GwtTour.endTour(false);, but there is an issue when the "dashboardLink" menu item is clicked. In this scenario, the $("html").bind("click",...) function should not be triggered, yet it is. The reason behind this behavior is unclear.
Code:
private void bindHandlers(){
// Handle click events within the popup
$(".hopscotch-bubble-container").bind("click", new com.google.gwt.query.client.Function() {
@Override
public boolean f(com.google.gwt.user.client.Event e) {
e.stopPropagation();
return false;
}
});
// Handle click events on the dashboardLink menu item
$("#dashboardLink").bind("click", new com.google.gwt.query.client.Function() {
@Override
public boolean f(com.google.gwt.user.client.Event e) {
e.stopPropagation();
return false;
}
});
// Close the GWT Tour when clicking outside of it
$("html").bind("click", new com.google.gwt.query.client.Function() {
@Override
public boolean f(com.google.gwt.user.client.Event e) {
GwtTour.endTour(false);
return true;
}
});
}