在弹出窗口之外处理点击事件

Question

How would you handle a click event outside of a "popup", I am actually using LinkedIn Hopscotch wrapper for GWT. The idea is when user clicks outside of the popup (ie outside .hopscotch-bubble-container ) the popup should hide. Calling GwtTour.endTour(false); eventually cause the popup to hide. This is fine, however, I also need to make when "dashboardLink" menu item is also clicked; this $("html").bind("click",...) should also not be called. Which it is called, not sure why.

Code:

private void bindHandlers(){

    // Handle when click event came from here
    $(".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;
        }
    });
    $("#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;
        }
    });
    // This event handler closes the GWT Tour
    // when user click 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;
        }
    });
}

Answer 1

Check the source of click event if it is triggered form expected source then do whatever is needed.

If Menu item is the source of this click event then do nothing.

Have a look:

$("html").bind("click", new com.google.gwt.query.client.Function() {
    @Override
    public boolean f(com.google.gwt.user.client.Event e) {
        // you can check it using instanceof operator, object references or Element ID
        // e.getSource() instanceof MenuItem
        // ((Widget) e.getSource()).getElement().getId()
        if (e.getSource() != dashboardLink) {
            GwtTour.endTour(false);
            return true;
        } else {
            return false;
        }
    }
});