jQuery - How to use e.preventDefault(); in a JavaScript function

Question

I have this JavaScript function :

function putVote(trackid, vote) {
}

and I call this function trought :

<a href="#" onClick="putVote('data1', 'data2')">Link</a>

I would like to use e.preventDefault(); on putVote(), but I think I'm wrong in some ways. How can I do it?

Cheers

You haven't told us why you would like to use the function ... however I can say that you'd probably be better off using jQuery to bind your event handler rather than hard-coding it into an attribute. — Pointy
– Pointy, Commented Mar 2, 2011 at 14:06
You could pass the event to putVote and then call preventDefault() there. — pimvdb
– pimvdb, Commented Mar 2, 2011 at 14:07

Skilldrick · Accepted Answer · 2011-03-02 15:41:38Z

7

The simplest thing to do would be to return false ~~from the function~~ in the handler (return false would only work in putVote if the handler had return putVote('data1', 'data2)).

But as Pointy said, a much better technique is to attach the event handler from JavaScript, most easily achieved by using a library/framework such as jQuery or Prototype.

edited Mar 2, 2011 at 15:41

answered Mar 2, 2011 at 14:07

Skilldrick

71.2k37 gold badges182 silver badges231 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

markzzz Over a year ago

Yeah I know, but I'd like to use preventDefault :)

markzzz Over a year ago

Why no! :) Ok, I'll use return false.

josh3736 Over a year ago

e.preventDefault(); prevents the event's default action (following a link) but does not stop the event from bubbling up the DOM. Returning false does both.

Skilldrick Over a year ago

@josh3736 - that's what I thought originally, but this fiddle belies that idea (unless I'm missing something).

josh3736 Over a year ago

@Skilldrick: I made a flawed assumption. Returning false from a jQuery bound handler does stop propogation (as well as cancelling the default action), because jQuery calls event.stopPropagation() if a handler function returns false. However, inline event handlers have existed since long before the concept of event bubbling, so returning false serves only to prevent the default action. Of course, no one should use inline event handlers anyway...

|

Chris Van Opstal · Accepted Answer · 2011-03-02 14:09:59Z

5

The easiest way:

<a href="#" onClick="putVote('data1', 'data2'); return false;">Link</a>

answered Mar 2, 2011 at 14:09

Chris Van Opstal

37.7k10 gold badges77 silver badges91 bronze badges

1 Comment

DoomageAplentty Over a year ago

An old answer but the exact thing I needed. Thank you!

kim3er · Accepted Answer · 2011-03-02 14:24:36Z

5

If you're using jQuery.

JS:

$("#link").click(function(evt) {
    evt.preventDefault();
    putVote('data1', 'data2');
});

HTML:

<a href="#" id="link">Link</a>

If you're using the latest version of jQuery and the HTML5 doctype.

JS:

$("#link").click(function(evt) {
    evt.preventDefault();
    var $self = $(this);
    putVote($self.data("one"), $self.data("two"));
});

HTML:

<a href="#" id="link" data-one="data1" data-two="data2">Link</a>

edited Mar 2, 2011 at 14:24

answered Mar 2, 2011 at 14:19

kim3er

6,5365 gold badges44 silver badges73 bronze badges

Comments

Pointy · Accepted Answer · 2011-03-02 14:21:01Z

In your case, the trick with using jQuery-style binding is that you want to be able to pass through element-specific parameters to the handler ("data1", "data2"). The "modern" way to do that would be this:

<a href="#" class='data-clickable' data-click-params='["data1", "data2"]'>Link</a>

Then, in a "ready" handler (or some other appropriate place), you'd bind your handler:

$('a.data-clickable').click(function(e) {
  var elementData = $(this).data('click-params');
  //
  // ... handle the click ...
  //
  e.preventDefault();
});

The "elementData" variable will end up (in this case, anyway) being an array with two values in it, "data1" and "data2". You can give JSON-notation values to "data-foo" attributes, and when you fetch the attributes with the jQuery ".data()" method it will automatically decode the JSON for you.

Collectives™ on Stack Overflow

jQuery - How to use e.preventDefault(); in a JavaScript function

4 Answers 4

6 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related