Javascript: Stop onClick default

Question

I get the feeling I am missing something obvious but just can see it.

A trigger on the click event is set:

 anchor.addEventListener("click", myClickEvent ); function myClickEvent() { this.preventDefault(); // fails return false; } 

However the default onClick method still happens.

Can I cancel default propogation at the same time as I addEventListener or is there some other way of doing this. I cannot use .preventDefault() from within myClickEvent because the event is not available at that point.

Edit following comments for clarity: The default onClick of the tag happens even though myClickEvent returns false.

Answer 1

Returning false from a handler that was registered with addEventListener does nothing. See https://stackoverflow.com/a/1357151/227299 and https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

The recommended way is to call event.preventDefault()

function myClickEvent(e) {
  e.preventDefault()
}

Handlers from HTML attributes still work, but you should not use it since it's not as clear what return false means when compared to event.preventDefault() (not allow the link to be followed) and event.stopPropagation() (don't let the event bubble up)

Answer 2

element.addEventListener("click", myClickEvent );

function myClickEvent(event) {
  event.preventDefault();
  return false;
}

Answer 3

There is no such function in the global scope called preventDefault -- you need to use the event that has been passed into your callback.

Also please make sure that you are attaching the event to something that can be clicked on (a form, anchor, button etc) that can potentially have an event prevented.

If you attach the event to a child/parent element nothing will work as you expected.

Answer 4

Nearly there thanks to Teemu's code but not quite.

There is a difference depending on how the function is called. Seemingly there is both a hidden parameter sent defining the value of 'this' and when called without parameters an automatic event object sent as the first visible parameter:

Call it without parameters:

 anchor.addEventListener("click", myClickEvent ); function myClickEvent(param1, param2) { // this = events parent element (<a>) // this.href = <a href=...> // param1 = event object // param2 = undefined oEvent = param1; oEvent.preventDefault(); } 

but then call it with parameters:

 anchor.addEventListener("click", function (oEvent) { myClickEvent(oEvent, myParameter); }); function myClickEvent(param1, param2) { // this = [object Window] // this.href = undefined // param1 = event object // param2 = myParameter oEvent = param1; oEvent.preventDefault(); } 

Notice how when parameters are sent manually the value of 'this' changes from the events parent element to '[object Window]', causing this.href to go wrong.

However the preventDefault now appears to be working reliably.