发表新帖
发表新帖

href=“[removed]” vs. href=“[removed]void(0)”

前端 未结
关注
8 679
[愿得一人]
[愿得一人] 2020-12-04 08:16

Our web app is rendered totally on the browser.
The server only talks to the browser through JSON messaging.

As a result, we only need a single page for the app

相关标签:
8条回答
  • 故里飘歌
    2020-12-04 08:56

    Using 'javascript:void 0' will do cause problem in IE

    when you click the link, it will trigger onbeforeunload event of window !

    <!doctype html>
<html>
<head>
</head>
<body>
<a href="javascript:void(0);" >Click me!</a>
<script>
window.onbeforeunload = function() {
    alert( 'oops!' );
};
</script>
</body>
</html>
    0 讨论(0)
  • 花落未央
    2020-12-04 08:57

    When using javascript: in navigation the return value of the executed script, if there is one, becomes the content of a new document which is displayed in the browser. The void operator in JavaScript causes the return value of the expression following it to return undefined, which prevents this action from happening. You can try it yourself, copy the following into the address bar and press return:

    javascript:"hello"

    The result is a new page with only the word "hello". Now change it to:

    javascript:void "hello"

    ...nothing happens.

    When you write javascript: on its own there's no script being executed, so the result of that script execution is also undefined, so the browser does nothing. This makes the following more or less equivalent:

    javascript:undefined;
javascript:void 0;
javascript:

    With the exception that undefined can be overridden by declaring a variable with the same name. Use of void 0 is generally pointless, and it's basically been whittled down from void functionThatReturnsSomething().

    As others have mentioned, it's better still to use return false; in the click handler than use the javascript: protocol.

    0 讨论(0)
  • 感情败类
    2020-12-04 08:58

    I usually do not use any href and change the aspect with css, making them seems link. Thus you do not have to worry about link effect at all, except for the event handler of your application

    a {
  text-recoration: underline;
  cursor: pointer;
}
    0 讨论(0)
  • 小鲜肉
    2020-12-04 09:12

    It does not cause problems but it's a trick to do the same as PreventDefault

    when you're way down in the page and an anchor as:

    <a href="#" onclick="fn()">click here</a>

    you will jump to the top and the URL will have the anchor # as well, to avoid this we simply return false; or use javascript:void(0);

    regarding your examples

    <a onclick="fn()">Does not appear as a link, because there's no href</a>

    just do a {text-decoration:underline;} and you will have "link a-like"

    <a href="javascript:void(0)" onclick="fn()">fn is called</a>
<a href="javascript:" onclick="fn()">fn is called too!</a>

    it's ok, but in your function at the end, just return false; to prevent the default behavior, you don't need to do anything more.

    0 讨论(0)
  • 甜味超标
    2020-12-04 09:15

    you could make them all #'s.

    You would then need to add return false; to the end of any function that is called onclick of the anchor to not have the page jump up to the top.

    0 讨论(0)
  • 无人及你
    2020-12-04 09:16

    javascript:void(0); --> this executes void function and returns undefined. This could have issues with IE. javascript:; --> this does nothing. safest to create dead links. '#' --> this means pointing to same DOM, it will reload the page on click.

    0 讨论(0)
 看不清?
提交回复
热议问题