Question

Here’s what I have:

• A web application that runs in a single HTML page (call it myapp.req), with content coming and going via AJAX
• The application can be entered externally with a link such as myapp.req?id=123, and the application opens a tab with the item at id 123
• The content on the page is mostly user’s content, and many times has inner-application links to myapp.req?id=123
• The problem is that clicking a link to myapp.req?id=123 reloads the browser, and removes any content or state that the user had loaded

What I want is to be able to catch link clicks whose destination is myapp.req?id=123, and instead of reloading the page, just open the tab for item 123, leaving anything else currently loaded alone. If the link is for an external website, though, obviously just let the browser leave.

So my question really: Can I have a global link handler that checks if I want to handle the link click, and if so, run some Javascript and don’t leave?

I understand I could find all <a>s and add listeners, but my hope is that the solution would only require setting up the listener once, and not adding link handlers every time new content is loaded on the page. Since content can be loaded many different ways, it would be cumbersome to add code to all those places.

Does that make sense?

Answer 1

Sure you can. Add a clickhandler on the body. So you catch all clicks. Then you have to check if the target of the event or one of its parent is a link with your specific href. In this case stop the event and open the tab.