javascript click event question

Question

I have a question below is a list with the anchor links now when the links are clicked I dont want the browser to go to that web page instead I want the browser to stay on the current page and display the list in an alert box to the user. I know this can be done with javascript maybe with the onclick event on the list item and display an alert box but how do I stop the browser to go that webpage.

 <ul id='list_o_links'>
    <li><a href='http://www.google.com'>List Item1</a></li>
    <li><a href='http://www.yahoo.com'>List Item2</a></li>
    </ul>

Magnar · Accepted Answer · 2010-10-04 20:14:01Z

1

You stop the browser from going to the link destination by calling event.preventDefault() or returning false in the bound event handler. I think the first is more explicit:

var alert_instead_of_following_link = function (event) {
    event.preventDefault();
    alert(this.href);
};

$("#list_o_links a").bind("click", alert_instead_of_following_link);

answered Oct 4, 2010 at 20:14

Magnar

28.9k8 gold badges62 silver badges66 bronze badges

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

1 Comment

Peter Ajtai Over a year ago

incidentally, it doesn't matter whether you include preventDefault() as the first, last, or middle line of the function. return false must be last, since it stops (returns from) the function.

Cristian Sanchez · Accepted Answer · 2010-10-04 20:16:10Z

1

$("#list_o_links").children().click(function () {
    var list = [];

    $.map($("#list_o_links").children(), function (elem) {
        list.push($(elem).text()); // take the text of each list item
    });

    alert(list.join(', '));

    return false; // stop the browser from going to the link
});

jsfiddle example

edited Oct 4, 2010 at 20:16

answered Oct 4, 2010 at 20:11

Cristian Sanchez

32.4k11 gold badges59 silver badges63 bronze badges

1 Comment

Peter Ajtai Over a year ago

I find .each() is simpler to use when possible: $("ul#list_o_links").children().each(function() { list.push($(this).text()); });

Collectives™ on Stack Overflow

javascript click event question

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related