What is the recommended way to handle links that are used just for style and/or interactive purposes?

For example, the link below triggers something in jQuery but does not go to another page, I used this method a while back ago.

<a class="trigger" href="#"> Click Me </a>

Notice theres a just a hash tag there, and usually causes the page to jump when clicked on, right? [I think]. It is only for interactive stuff, doesn't go to another page or anything else. I see a lot of developers do this.

I feel like its the wrong thing to do though. Is there another recommended way to do this without using HTML attributes a way where it is not suppose to be used?

Not using <button> ether because the link would not be a button.

Maybe without a hash?

<开发者_运维百科;a class="trigger"> Click Me </a>

& in CSS:

.trigger {
 cursor: pointer;
 }

So the user still knows its for something that you should click?

I like to make such links return false on click, that way, clicking them doesn't result in any jumps. With jQuery that would be as easy as

$(selector).click(function(e)
{
    e.preventDefault();
});

or in the HTML as such

<a class="trigger" onclick="return false;" href=""> Click Me </a>

Don't remove that hash.

It's true that under (modern, at least) versions of Firefox, Chrome, Opera, and Safari, an anchor tag with an empty href (i.e. href="", not a missing href) will display as a normal link that simply doesn't respond when clicked, unlike the hash-href which jumps to the top of the page. Internet Explorer, however, takes a different approach.

When a link without an href is clicked in Internet Explorer, it responds by opening your Desktop directory in Windows Explorer. I got this response in IE7 and IE8 (IE6 just crashed, though that could be unrelated - I've had issues with that VM).

If a user browses your site in IE with JavaScript disabled, do you really want all your links to open their Desktop? I think not.

Also important is that removing the href attribute from an anchor element entirely causes it to be rendered as plain text - i.e. it doesn't act as a link, you can't tab to it, etc. Not good.

As for controlling the behaviour of the link when clicked, @partoa has the right, but possibly incomplete answer.

I'm no JavaScript guru by any stretch of the imagination,but from what I've read you don't want to use return false; for this. According to this article I came across a while ago, return false; has some additional behaviours you might not actually want. It recommends you just use preventDefault to stop the links normal behaviours (i.e. navigating to a new resource). Read over that link to see what return false; really does before deciding how you want to handle it.

For interactive purposes:

Removing the href="#" from your tag will also remove it from the default tab order, so users browsing with the keyboard will not be able to activate your link.

I recommend keeping href="#" in your tag and adding return false to the end of the script that is run by the link.

I can't see a reason why you would want to use an A tag for style purposes.

in konqueror (kde browser), you can disable pointers to change. Then your solution fails. But in general, I'm agree with you.