What is the use of "preventDefault" in a click event?

Question

Could you please help me in understanding what the following code does:

var FluidNav = {
    init: function() {
        $("a[href*=#]").click(function(e) {
        e.preventDefault();
            if($(this).attr("href").split("#")[1]) {
                FluidNav.goTo($(this).attr("href").split("#")[1]);
            }
        });
        this.goTo("home");
    },

I am confused about why they would include a preventDefault there. Any ideas?

EDIT:

The rest of the code:

goTo: function(page) {
        var next_page = $("#"+page);
        var nav_item = $('nav ul li a[href=#'+page+']');
        $("nav ul li").removeClass("current");
        nav_item.parent().addClass("current");
        FluidNav.resizePage((next_page.height() + 40), true, function() {
             $(".page").removeClass("current"); next_page.addClass("current"); 
        });
        $(".page").fadeOut(500);
        next_page.fadeIn(500);

        FluidNav.centerArrow(nav_item);

    },

it's checking for hash tags. like anchors. I would guess it scrolls to the element. We would need to know what FluidNav.goTo does — Kai Qing, Feb 13 '13 at 03:38
https://developer.mozilla.org/en-US/docs/DOM/event.preventDefault — Andy Ray, Feb 13 '13 at 03:38
For this kind of simple question you should use the chat. http://chat.stackoverflow.com/ — Ricardo Castañeda, Feb 13 '13 at 03:41

score 3 · Answer 1 · answered Feb 13 '13 at 03:38

3

$("a                 // select <a> elements 
[href*=#]")          // which have an href attribute that contains #
.click(function(e) { // and bind a click event handler

The preventDefault() stops the browser from navigating to a new page, or jumping to a different location in the same page, when the link is clicked.

Description: If this method is called, the default action of the event will not be triggered.

answered Feb 13 '13 at 03:38

Matt Ball

354,903
100
647
710

Or goTo may be to handle ajaxed content for those fancy pants sites – Kai Qing Feb 13 '13 at 03:39
Thank you! I have included the rest of the code as an EDIT. I am asking basically because I am looking on how to make the code open the #hash pages separately - as new pages, so I can use the browser's back button. – user1157404 Feb 13 '13 at 03:47
Why didn't you say so originally? Anyway, take a look at the [HTML5 history API](http://diveintohtml5.info/history.html). – Matt Ball Feb 13 '13 at 04:18

What is the use of "preventDefault" in a click event?

1 Answers1