Alternative zu <a href="#"> when the anchor tag only triggers a jQuery action without redirecting the user?

Question

I have numerous anchor tags on my page that only trigger jQuery actions on the same page.

The don't redirect the user to another location, which is the normal expected behavior of an anchor tag.

I don't want to have restful urls in my app for every action. But, I also don't like sending the user to the top of the page every time they click on one of these <a href="#"> tags.

What's a better value to put inside the href value of the anchor tag besides #?

Answer 1

return false; 

Use this to stop browser sending them to top of page?

Answer 2

# is fine. But the callbacks that are triggered should then return false.

// assigning a click callback to all anchors 
    $('a').click(function(evt){ 
     //... do stuff 
     return false; // avoid jump to '#' 
    }) 

Answer 3

I prefer to use:

<a href="javascript:">foo</a> 

unless it is actually an ajax call to load a partial template in which case I use something like this:

<a href="/link/to/page" onClick="ajax_request_to_partial(); return false;">foo</a> 

By returning false in the onclick event, you make sure the site is not reloaded, but it can still be used for opening the url in a new page.

Answer 4

Can you reference a fragment on the page that could work as a logical fallback to the non-executed JavaScript action? If so, it makes a lot of sense to reference <a href="#account"> and have an id="account" on the page that could work as a fallback.

Another option is to reference the dynamically loaded content directly; that way you can quite conveniently use the href in the Ajax call instead of hard-coding what to request in JavaScript somehow; <a href="/path/to/dynamic/content">.

Lastly, you can not have the <a href="#"> statically in the HTML at all, but instead create it on the fly with jQuery since it's only used by jQuery anyway. No need to pollute the markup with placeholders for JavaScript if the placeholders are only used by and for JavaScript anyway.

Regarding "sending the user to the top of the page"; you should just return false from your the function you have hooked up as a click() handler;

$('a').click(function() { 
    // Do your stuff. 
    // The below line prevents the 'href' on the anchor to be followed. 
    return false; 
}); 

Answer 5

if you bind some action on click on you can call preventDefault() to avoid sending user in top of page

$("a.clickable").live('click',function(){$(this).doSome(); $(this).preventDefault()}); 

Answer 6

If you have links that aren't links, perhaps they shouldn't be links? :-) You might consider a different UI element that doesn't have a default behavior (outside of a form), like button (you can style buttons to a substantial degree). Or you could use span or similar, but if you do be sure to set the appropriate accessibility information (such as an ARIA role="link"), damit Sie Bildschirmleser (und Browser Tabbing) nicht durcheinander bringen.

Wenn Sie jedoch weiterhin <a href="#">...</a> verwenden möchten, fügen Sie einfach einen Handler an sie an, der event.preventDefault(); aufruft oder false zurückgibt.

Answer 7

Wenn der Anker für Leute nutzlos ist, die kein Javascript haben, sollten sie es überhaupt nicht sehen.

Die beste Alternative besteht darin, diese Links mithilfe von jQuery beim Laden der Seite zu generieren. Auf diese Weise werden nur die Personen angezeigt, die sie verwenden.

In diesem Fall href="#" aufweist, ist in Ordnung, denn solange Ihre Event-Handler mit return false; beendet dann die href nie

Answer 8

Sie sollten wirklich ein <button> Element für JS-nur Aktionen werden mit verfolgt werden. Sie haben eine Standardaktion (wenn sie sich in einem Formular befinden), aber außerhalb eines Formulars sind sie rein für vom Benutzer ausgelöste Aktionen, an die Sie Ihren JS-Ereignishandler binden.

Answer 9

Haben Sie versucht, den href-Parameter wegzulassen?

Das sollte gut funktionieren und den Browser nicht provozieren, um eine Webseite zu laden oder die Seitenposition zu ändern. In der Tat wird es nichts tun, es sei denn, Sie haben JavaScript, um es zu unterstützen.

Der href-Parameter ist optional, warum also, wenn Sie ihn nicht verwenden?

Answer 10

Ich benutze unten Code und das funktioniert gut.

<div class="panel-heading">Definition 
      <div class="pull-right"> 
       <i class="fa fa-wrench"></i> 
       <a id="step3Ad" href="javascript:void(0);">Advanced</a> 
      </div> 
    </div