Attach a JavaScript function to a standard link that would handle the request?

Question

I have several DIVs on my page that belong to the same class and contain short statements with links automatically generated by FlowDock (adding links to @mentions).

Is there a way NOT to redirect a user to another URL, but instead to call on a function when they click on that link, which would filter the statements on that page, showing only the .entry DIVs that contain the @mention that was clicked on?

Here's an example:

<div class='entry' data-hashtags='#supermarkets #food #alcohol'>
    <p>#supermarkets sell #food and #alcohol <a title="Search @private" class="app-tag-link" href="/context/@private">@private</a></p>
</div>

The user clicks on @private and instead of going to /context/@private a JavaScript function is called that filters the DIVs through jQuery, as is shown here.

Thank you for your help!

Answer 1

Sure - you want to attach a listener to the link and call preventDefault to prevent the default behavior of the link (which is to redirect).

Without using jQuery:

element.addEventListener('click', function(e) {
  e.preventDefault();
  // Filter
});

Fiddle

Using jQuery:

// jQueryObject holds the selected set of element(s)
jQueryObject.on('click', function(e) {
  e.preventDefault();
  // Filter
});