I have a lot of Backbone.js actions that start with link like:

<a href="#makeCookies">Make Cookies</a>

and a Backbone.View events hash like:

'click [href=#makeCookies]': 'makeCookies'

and an event handler function like:

makeCookies: function (event) {
    event.preventDefault();
    //code to make cookies
    //I have no intention of ever using #makeCookies in the URL,
    //it's just there so I can wire up the event handler properly
}

Is there a clean way to avoid that boilerplate event.preventDefault(). I thought about just using <button> tags instead of <a> tags but that seemed inappropriate.

I have a lot of Backbone.js actions that start with link like:

<a href="#makeCookies">Make Cookies</a>

and a Backbone.View events hash like:

'click [href=#makeCookies]': 'makeCookies'

and an event handler function like:

makeCookies: function (event) {
    event.preventDefault();
    //code to make cookies
    //I have no intention of ever using #makeCookies in the URL,
    //it's just there so I can wire up the event handler properly
}

Is there a clean way to avoid that boilerplate event.preventDefault(). I thought about just using <button> tags instead of <a> tags but that seemed inappropriate.

• javascript
• backbone.js
• backbone-events

Share Follow edited Apr 4, 2022 at 20:56 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Dec 19, 2012 at 0:52 Peter LyonsPeter Lyons 146k3131 gold badges285285 silver badges279279 bronze badges 7

• 4 I actually think that <button> is more appropriate than <a> for anything that you can press but doesn't naturally take you to a separate page: if pressing a thing doesn't change the URL then that thing isn't an <a> at all. <button> also has the great advantage of having a disabled attribute. Just make sure you say <button type="button"> to avoid different browsers assuming different defaults for the type attribute. – mu is too short Commented Dec 19, 2012 at 1:24
• +1 for the use of button – Simon Boudrias Commented Dec 19, 2012 at 1:33
• That's probably the way to go I guess. My 2.5 annoyances with that are <button type="button" class="makeCookies"> is almost as much boilerplate as event.preventDefault(), then if I want it to just be a text link I have to style it the opposite of its default styling. What do folks think about just using <span class="makeCookies">Make Cookies</span>? – Peter Lyons Commented Dec 19, 2012 at 2:30
• The idea of using <a>s is that crawlers can follow the hrefs when they parse your page even if they don't 'speak' javascript. Of course if your app is not public or if you're not taking steps (such as server-side rendering) to deliver the rendered pages to the crawler in the first place, then there's really no reason to stick to <a>s. – biril Commented Dec 19, 2012 at 23:26
• Well, links that navigate to other resources can have hrefs and do the preventDefault thing when running in a browser but still be useful for crawlers, but the "Sign In" link that doesn't change the URL and just pops up a sign in dialog doesn't need an href. – Peter Lyons Commented Dec 19, 2012 at 23:41

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 10

Why do you need to have the href attribute at all, if you plan on discarding it anyway? How about just using a class name?

HTML code:

<a class="makeCookies">Make Cookies</a>

View code:

'click .makeCookies': 'makeCookies'
...
makeCookies: function (event) {
    // No need for event.preventDefault() anymore!
}

You could add a prevent-default handler to the document element. Like so:

$(document).click(function (e) {
    if (e.target.tagName === "A") {
        e.preventDefault();
    }  
})

This would of course disable all navigation initiated by a-tags but if your app provides custom handling for that then it shouldn't be a problem.

If you'd like to let some a-tags 'pass through' then you could add further conditions in the prevent-default handler, like checking if the value of the href attribute begins with '#'.