12

In the following JavaScript code sample:

var myButton = $('#myButton');
myButton.click(function (event) {
    /* stuff... */
    event.preventDefault();
});

What are the advantages and disadvantages of default-preventing the action at the beginning or the end of the function? - supposing the case of unconditionally wanting to prevent it in the end. Is there any technical reason to choose one way?

Surfing the internet I've found only one reference -dead blog, sorry for the Google Cache link-, and points that preventing the default action at the beginning will avoid the action happening in case the js function crashes.

NOTE: I've used jQuery in my example just for familiarity, the question is not about jQuery, the answer for the classical event handling mode will be the same.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Áxel Costas Pena
  • 5,886
  • 6
  • 28
  • 59

3 Answers3

12

I put my preventing code at the beginning for the reason you stated. If there is an error earlier in the js earlier in the function, the default action will already have been prevented. This can be desired behavior in production, but can also help in debugging your development code, consider:

$('a').on('click', function(e) {
  console.log('some debugging information here');
  // Other stuff
  e.preventDefault();
});

If an error were to happen, the page could refresh or follow the href of the anchor before you could read the debugging information. Switching the action to the top will make sure you can read the output in the console.

Edit As Axel points out in the comments, another advantage is you immediately grok that the code is replacing the default action and not supplementing it.

jhummel
  • 1,724
  • 14
  • 20
  • 2
    this is a good point, in the other hand i've thinked that maybe preventing the event at the start may add expresivity to the function, because a simple sight tells you that you don't want the default action, and you will do some fancy stuff, the other way you must go to the end to know that important fact of the event handling... – Áxel Costas Pena Jan 03 '13 at 16:14
  • @Axel Another great point. I'll update the answer to reflect that. – jhummel Jan 03 '13 at 16:42
  • 1
    http://jsbin.com/ekogot/1/edit here is little bit stupid example, but yet another plus for prevent default at the top – dmi3y Jan 03 '13 at 16:55
  • Oh, I don't think it's stupid, it's very important. Default-preventing at the top of the function allows moving/adding/removing return statements without breaking code flow, very useful! Thanks @dmi3y. More completion to the answer. – Áxel Costas Pena Jan 03 '13 at 17:47
  • @dmi3y, please add to your answer the las thing you pointed to finally mark it as perfectly answered – Áxel Costas Pena Jan 07 '13 at 09:21
3

The final call where to put preventDefault() is totally on developer's choice. Though as it is already pointed in most cases better choice is place it at the very top of code to avoid unpredictable behavior like this:

 $('#one').click(function(ev){
  //ev.preventDefault(); // for 90% this is better choice, consider example below
  alert('no hey!');
  return; // this is very simple example, in more complex code sometimes it could not be such obvious
  ev.preventDefault(); // sometimes though it may be required to keep default action depending on some cases
})

But have to admit that it could occur that you have keep default action depending on something, as my point this is rare situation, but than you may put prevent default at the bottom and use return with some if condition.

dmi3y
  • 3,482
  • 2
  • 21
  • 32
0

You don't have any diference, the message queue is trapped in your function.

HMarioD
  • 842
  • 10
  • 18