Javascript:void or "#" or

JavaScript
1

I have a list of links on the same page. If user clicks on the link, it opens ajax window with msg.

$(".openMsg").click(function(){
//some code here
}

<a class="openMsg" href="#">More info</a>

I am wondering what is the best option to use in those cases. I used “#”, but this is not ok because it scrolls the page to top. I want to stay scroller on the same place.
Maybe I should use the following?

<a href="javascript:void(0)" onclick="openMsg();">More info</a>

Or maybe I even shouln’t use <a> element?

Thank you

2

Using what you had before is fine.


<a class="openMsg" href="#">More info</a>

You can return false from the event function, to tell the web browser to not perform its default action. That prevents the web browser from trying to follow the link.


$(".openMsg").click(function() {
    //some code here
    ...
    // and at the end
    return false;
}

That will work in most cases.

In the rare cases when you also require that the event continues to bubble up to parent elements as well (as I said, it’s rarely a problem), you can use jQuery’s preventDefault method from the event.


$(".openMsg").click(function(evt) {
    //some code here
    ...
    // and at the end
    evt.preventDefault();
}