31

I want to prevent links from opening pages. So I have written this :

$("a").click(function(e) {
    e.preventDefault()
}

which is great! But this blocks my other event :

$(".toolbar a").click(function(e) {
    ...action...
}

Sure I can add my action to the first event with some test, but is there an elegant way to prevent only href event from executing?

EDIT

In fact it works, sorry. See @raina77ow fiddle working here: http://jsfiddle.net/HeFS6/

Benoit R
  • 338
  • 1
  • 3
  • 8
  • what do you mean by other events..? Can you show that in code ...? – Sudhir Bastakoti Sep 06 '12 at 11:40
  • 1
    Well, `e.preventDefault()` doesn't block event propagation; it does exactly what you need. Check [this fiddle](http://jsfiddle.net/HeFS6/) for an example of 'generic-specific' mix; what's different in your code? – raina77ow Sep 06 '12 at 11:46
  • I'd suggest checking [this article](http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/) as well; it shows the differences between four event-messing statements in jQuery. – raina77ow Sep 06 '12 at 11:52
  • Indeed it works, I might have problems with the binding events. It works now, and I don't find my problematic code back. Thanks for the answers! – Benoit R Sep 06 '12 at 12:31

3 Answers3

35

Use return false instead. You can see the code below working here.

​$("a").click(function() {
    return false;
});

$(".toolbar a").click(function() {
    alert("Do something");
});​

As pointed by @raina77ow with this article, using return false is the same as calling event.preventDefault() and also event.stopPropagation(). As I had troubles without return false on some codes in the past, I always suggest it.

But the most importante thing here is the bind order: your last bind will be your first executed code. So, take care about it and go.

Erick Petrucelli
  • 14,386
  • 8
  • 64
  • 84
  • It's plain wrong: `return false` = `event.preventDefault(); event.stopPropagation();` – raina77ow Sep 06 '12 at 11:50
  • Well, `return false` don't stop the event bubbling. What is wrong with this sentence? I'm not talking about `preventDefault()` or `stopPropagation()` but just suggesting the use of `return false` that never caused troubles in my codes. – Erick Petrucelli Sep 06 '12 at 12:00
  • `return false` is equivalent to calling both `.preventDefault()` and `.stopPropagation()` (but not `.stopImmediatePropagation()`). Hence it _does_ stop the event bubbling. Please check the article I've linked in the comments to this question. – raina77ow Sep 06 '12 at 12:01
  • I know this article. I guess I was not clear: `return false` not stop the spread of the events that were linked by jQuery. I was not talking about the native JavaScript event bubbling. Well, the code solves the OP problem, but I will update the answer with the article link as well. – Erick Petrucelli Sep 06 '12 at 12:06
  • I'm sorry, but how exactly does `return false` solve the OP's problem? ) It does nothing more to NOT prevent the native event bubbling than `.preventDefault()` does. – raina77ow Sep 06 '12 at 12:10
1

In place of e.preventDefault(), have you tried return false? This should also prevent browser default behaviour.

Matt C
  • 903
  • 1
  • 8
  • 15
0

There is no href event. That is what you'd end up with if prevent default on click. You should just use more specific selectors.

Hazem Salama
  • 14,891
  • 5
  • 27
  • 31