ev.preventDefault(); and HREFs

Question

After having my last question answered, I have never see the preventDefault(); function before.

So my question is now then, What is the best method? I made the following code

<!DOCTYPE html>
<head>
    <script type='text/javascript' src='files/jquery-1.7.2.min.js'></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#abc").click(function(ev) {
            ev.preventDefault();
            alert('hey');
            });
        });
       </script>
</head>
<body>
    <h1>helloasdasdasdsad</h1>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <a href="javascript:void();" id="abc">Link 1: javascript:void();</a><BR><BR>
    <a href="#" id="abc">Link 2: #</a><BR><BR>
    <a href="javascipt:void(0);" id="abc">Link 3: javascript:void(0);</a><BR><BR>
    <a id="abc">Link 4: NO HREF</a><BR><BR>
</body>
</html>

..I hate using # because it scrolls to the top of the page. It turns out javascript:void(); in the href will cause a syntax error in IE. So is the answer to put the (ev) and ev.preventDefault(); lines in every function? Or can I just return false; at the end of every function?

What is the best, most widely accepted practice?

EDIT: Alright, so event.preventDefault(); is the best thing to use, But that still doesnt answer what goes in the HREF if i want a redundant link? I thought best practice was to always use .click events with <a href="">, as some older browsers won't respond to a click event or hover on DIV/SPAN/IMG elements?

possible duplicate of [ script links without href="#"](http://stackoverflow.com/questions/11144653/a-script-links-without-href) — zzzzBov, Jun 29 '12 at 14:52
shoot, that wasn't the right question, although very similar...there are other dupes around. — zzzzBov, Jun 29 '12 at 14:52
possible duplicate of [event.preventDefault() vs. return false](http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false) — FoamyGuy, Jun 30 '12 at 15:43

score 1 · Accepted Answer · edited May 23 '17 at 12:10

1

See this great post which should answer your question. Also, you don't need anything in hrefs.

edited May 23 '17 at 12:10

Community

1
1

answered Jun 29 '12 at 14:51

Lusitanian

11,012
1
41
38

so the answer is I simply leave the HREFs as "" and use preventDefault(); ?? – Chud37 Jun 29 '12 at 14:56
The thing with missing of the `href` is that it can cause the anchor to not have various anchor properties in some browsers (eg no `:hover`, `:active` states, won't use pointer cursor etc) - you may as well use a span if you're not having any graceful degradation by using `href` for non-js users. – Dunhamzzz Jun 29 '12 at 14:57
...I thought it wasn't good practice to use `$("#foo").click` on anything that wasn't an `` because of old browser use etc. – Chud37 Jun 29 '12 at 14:58

score 0 · Answer 2 · answered Jun 29 '12 at 14:51

0

For the anchors you don't want the click to do anything, add the preventDefault()

answered Jun 29 '12 at 14:51

Huangism

16,278
7
48
74

score 0 · Answer 3 · 2012-06-29T15:11:16.540

0

If your links are having only an empty href="#", maybe you should consider you using a <span> or a <div> instead. This way you don't need the e.preventDefault() at all.

e.preventDefault() and return false both prevent the default event behavior. return false also prevent the event from bubbling up the DOM.

Using href="javascript:void(); should be avoided if you want unobtrusive code.

Also ensure that you don't use the same id several places, as you do with "ABC"

edited Jun 29 '12 at 15:11

answered Jun 29 '12 at 14:59

yes the multiple #abc was purley because of laziness for the example. But the question still stands then, what goes in the HREF? – Chud37 Jun 29 '12 at 15:02

ev.preventDefault(); and HREFs

3 Answers3