Jquery – Prevent href from opening link but still execute other bind events

clickeventsjquerypreventdefault

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/

Best Answer

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.

Related Solutions

JQuery prevent other events after a click

There are various ways to prevent concurrent clicks from running the code.

One way is to unbind('click') on the element, then .bind() it again when you're ready.

I'd rather use some sort of flag. It could be a variable, but I'd rather assign a class to the element, like .processing, and remove it when done. So you would have the handler check for the existence of that class to determine of the code should run.

$('someElement').click(function() {
    var $th = $(this);
    if($th.hasClass('processing'))
          return;
    $th.addClass('processing');
    // normal code to run
    // then when done remove the class
    $th.removeClass('processing');
});

Another option is to use the elements .data() to set a similar flag, like $(this).data('processing', true); Then set it to false when done.

Jquery – How to bind ‘touchstart’ and ‘click’ events but not respond to both

Update: Check out the jQuery Pointer Events Polyfill project which allows you to bind to "pointer" events instead of choosing between mouse & touch.

Bind to both, but make a flag so the function only fires once per 100ms or so.

var flag = false;
$thing.bind('touchstart click', function(){
  if (!flag) {
    flag = true;
    setTimeout(function(){ flag = false; }, 100);
    // do something
  }

  return false
});

Best Answer

Related Solutions

JQuery prevent other events after a click

Jquery – How to bind ‘touchstart’ and ‘click’ events but not respond to both

Related Topic