Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

preventDefault won't work on Firefox

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?

like image 644
Tomer Lichtash Avatar asked Sep 02 '09 11:09

Tomer Lichtash


People also ask

What does preventDefault () do?

preventDefault() The preventDefault() method of the Event interface tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be.

What is the difference between stopPropagation and preventDefault?

preventDefault() will not allow the user to leave the page and open the URL. The event. stopPropagation() method stops the propagation of an event from occurring in the bubbling or capturing phase.

Does preventDefault stop bubbling?

preventDefault() Prevents the browsers default behaviour (such as opening a link), but does not stop the event from bubbling up the DOM.

What is the opposite of EVT preventDefault?

There is no opposite method of event. preventDefault() to understand why you first have to look into what event. preventDefault() does when you call it. Underneath the hood, the functionality for preventDefault is essentially calling a return false which halts any further execution.


3 Answers

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.

like image 141
cletus Avatar answered Sep 19 '22 22:09

cletus


This always works: Firefox needs the "event handler", Chrome doesn't. So this works on all browsers:

$('#id_obj').click(function(event) {   
     event.preventDefault(event);  
}
like image 27
evan tedeschi Avatar answered Sep 20 '22 22:09

evan tedeschi


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

should be

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

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.

like image 28
ijw Avatar answered Sep 20 '22 22:09

ijw