preventDefault won't work on Firefox

Question

I'm trying to prevent A HREF from actually opening the link, but to execute a script. I got the script part working, but it seems Firefox would just ignore this:

$("#permalink a").click(function(id){
  $("#newPost").fadeToggle;
  event.preventDefault();
  var id = this.getAttribute('href');
  $("#newPostContent").load(id);
  $("#newPost").show("fast");
});

Can anyone suggest a cross-browser script for preventing defaults?

Answer 1

The standard solution to this is to return false from the click() handler. return false is the equivalent of calling preventDefault() and stopPropagation() on the event. preventDefault() is sufficient for this task too so either it or return false will work.

Your problem seems to be syntax errors and misnamed parameters. I see:

• fadeToggle has no parentheses;
• the function parameter is called id yet you call event.preventDefault(); and
• You're fading the post and then immediately showing it? That'll queue two animations but doesn't make a lot of sense. You probably want to chain together those two things and the load() in a rational manner.

So this should work:

$("#permalink a").click(function(event) {
  $("#newPost").fadeToggle();
  var id = this.getAttribute('href');
  $("#newPostContent").load(id);
  $("#newPost").show("fast");
  return false;
});

You can freely replace return false with event.preventDefault() in this instance but the propagating click() event might or might cause other issues depending on what other event handlers you have.

Answer 2

You should just be able to return false;

Answer 3

Add return false into the function, it should help.

$("#permalink a").click(function(id){
                    $("#newPost").fadeToggle;
                event.preventDefault();
                    var id = this.getAttribute('href');
                    $("#newPostContent").load(id);
                $("#newPost").show("fast");
                return false;
            });

Answer 4

Er...

            $("#permalink a").click(function(id){

should be

            $("#permalink a").click(function(event){

surely?

... then

var id=event.target;

will give you the object you're working on, and event.preventDefault() will stop the default action.

Typically I return false; myself, but this both prevents the default action and stops propagation of the event, which might have effects you didn't expect with other event handlers.