# or [removed]void(0)?

2020-02-04 06:09发布

站内问答 / JavaScript
1457 4 6

I do not intend to start a debate.

If we want to make use of the onClick event, we should, on a certain way to disable the href to trigger. - Is this correct ?

If the above is correct, I believe that javascript:void(0) has the advantage of NOT triggering the scroll behavior.

Are those assumptions correct?

Note: I do not intend to search for a chimera, but my quest is about finding a way to style buttons in a cross-browser way with no accessibility hit (at all), without hacks and quirks.

4条回答
爷的心禁止访问
2楼-- · 2020-02-04 06:39

If you have to have an href, use javascript:void(0), because it has no effect, unlike #. But you can just have no href at all, give the a a class to make it look like a link, e.g.:

/* in stylesheet */
a.scriptlink {
    color: blue;
    text-decoration: underline;
    cursor: pointer
}

<!-- in HTML -->
<a class="scriptlink" onclick="whatever">
查看更多
0人赞 添加讨论(0) 举报
相关推荐>>
3楼-- · 2020-02-04 06:40

If you want to prevent following the link, you should add event.preventDefault() in your click handler (event.returnValue = false; in IE).

It seems that you are just after the look of a link and not its functionality (or purpose). If so, you can use a button with CSS to style it accordingly.

Having real links with href contents # or javascript:void(0) should be avoided.

Further explanation:

Using a link just to have something "clickable" is not good. A link has a distinct syntactical meaning. As you can assign a click event handler to every element, you can use any other element for that.

The syntactically most correct one (imo) would be button as you will still have the possibility to use tab to navigate on them. You can style them with CSS to make them look like a link if you want to (see this example).

Now regarding preventing the default action:

Assuming you have a normal link with a proper href value and you want to intercept the click. In the click handler you assign to the element, e.g.

link.addEventListener('click', function(event){
    // some code
    event.preventDefault();
}, false);

using event.preventDefault() prevents the default action, which in case of a link, is following the URL.

(the code above is an example for W3C compatible browsers, IE is a bit different)

查看更多
0人赞 添加讨论(0) 举报
贼婆χ
4楼-- · 2020-02-04 06:44

I prefer javascript:void(0) over # because it does not alter the address bar by putting a # there (which may affect any future scripts that use/alter the URL).

But better than both of them, I prefer to have the onclick function return false (so it doesn't navigate at all) and then put an URL that would result in the same action as clicking. For example, lets say clicking the link loads some content into a 'mainArea' div. Then the URL would reload the whole page, with that mainArea filled with the same thing. The advantage to doing this is that if they right-click the url and Copy Address or Open in New Tab, it still works.

<a href="/FullUrl" onclick="return doClick(this);" >Stuff</a>
查看更多
0人赞 添加讨论(0) 举报
Animai°情兽
5楼-- · 2020-02-04 06:53

If you want to seperate markup and scripting, you might also consider using event delegation to set-up the event handlers.

Many Javascript frameworks (eg jQuery) come with cross-browser abstractions to make this less of a bother; because of NIH-syndrome, I rolled my own solution, though.

A complete example could look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>Test</title>
  <script type="text/javascript"
   src="http://mercurial.intuxication.org/hg/js-hacks/raw-file/tip/capture.js">
  </script>
  <script type="text/javascript">
// un-hide elements
document.documentElement.className = 'js';

// use event-delegation to capture click-events
capture('click', '.clicky', function(event) {
    alert(this.title);
    return false;
});
  </script>
  <style type="text/css">
/* display element only if scripting is enabled */
.clicky { display: none; }
.js .clicky { display: inline; }
  </style>
 </head>
 <body>
  <!-- link shouldn't be user-accessible; nevertheless, direct user to
   error page -->
  <div>
   <a href="no-js.html" class="clicky" title="clickety-click">click me</a>
  </div>
 </body>
</html>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)