troubleshooting Question

How to properly bubble events to create new window/tab

Avatar of Dante Gagliardi
Dante GagliardiFlag for United States of America asked on
JavaScript
8 Comments1 Solution563 ViewsLast Modified:
The setup:

My page consists of elements (anchors) that need to make an AJAX call when they are clicked. However, when the elements are left-clicked, the page loads and interrupts the AJAX call. I do not have the ability to modify this AJAX call, and so I cannot just make it synchronous.

To fix this problem, I created an event handler that would capture click events, and use another method that would load the target page after completion of the AJAX call. This also required that I do not bubble the event, lest I interrupt the AJAX call again. However, this broke the ability to middle click/ctrl click/shift click and open the page in a new tab/window.

To fix that problem, I modified the event handler to act on the mouseup event (because Firefox triggers mouseup on middle click). If it is a mouseup event from the left mouse button, with no modifier keys, I use the above mentioned method to load the target page after the AJAX call completes. If the event has a modifier key, or is a middle click, I do nothing and allow the event to bubble (if the target is opened in a new tab/window, the AJAX call will continue processing just fine).

Unfortunately, that gets me here. What is happening now, is the mouseup event triggers one page load, while click event fires immediately afterwards (which I no longer handle) that appears to be firing a second page load. This is doubling my server overhead for these links.

This handler is also bound to the keypress event, so we can capture <Enter> keypresses.

Below is the Handler I am using (any syntax errors are likely from simplifying the handler code):
// This handler is bound to the 'mouseup' and 'keypress' events
function (e){
    // Ignore anything that isn't left click, middle click, or <Enter>
    if(e.which != 1 && e.which != 2 && e.which != 13){
        return true;
    }
    AJAX_CALL();
    // Bubble on modifier keys, or middle click
    if(e.metaKey || e.ctrlKey || e.shiftKey || e.which == 2){
        return true;
    }
    // Else, make sure this element has an href, and follow it with our custom method
    else if(this.attr('href') != '#' && this.attr('href') !== undefined){
        goToUrl(this.attr('href'),false);
        return false;
    }
}

What I'm looking for:

The problem boils down to this: I need to be able to issue an asynchronous AJAX call that isn't interrupted, but the handler that does this must retain default browser behavior for opening new tabs/windows. This solution needs to work on Chrome/Safari/Firefox/IE8+, and preferably also on mobile devices (though mobile isn't a strict requirement).

Ideally, I would like a pure client-side solution (using JS and jQuery 1.9.1).

My investigation thus-far suggests that this isn't a trivial problem to solve on a cross-browser basis. The functionality I am trying to create is important enough that a pre-existing library capable of doing this is not out of the question, but it is not preferred.

I've run up against a wall on this one. Any help would be greatly appreciated.
ASKER CERTIFIED SOLUTION
Dante Gagliardi
Developer

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 8 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 8 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros