Which href value should i use for javascript links or javascriptvoid0

在Web前端开发中，<a>元素的href属性用于定义超链接的目的地。href的值可以是多种类型，比如URL、书签或者是JavaScript伪协议。`"#"和"javascript:void(0)"都是在某些情况下用来创建一个点击不会导致页面跳转的链接的方法。

当你使用"#"（锚点）时，它会创建一个指向页面中相同ID的元素的书签链接。如果这个ID不存在，它将会导致页面滚动到顶部。如果只是单纯的"#"，没有跟随具体的ID，那么点击链接通常会导致页面滚动到顶部，并且URL会更新（添加一个#`在URL末尾）。

当你使用"javascript:void(0)"时，它会执行一个空的JavaScript语句，该语句不会有任何效果，并且页面不会有任何滚动或者URL的变化。这种方法通常用于那些想要附加JavaScript事件监听器以执行某些动作但不希望更改URL或者页面位置的场景。

使用场景对比：

• 使用"#"：

  • 当你想创建一个真正的书签/锚点，例如页面内导航。
  • 如果你不介意URL变化（URL末尾会添加一个#）。
  • 如果你想通过CSS选择器或者JavaScript感知到URL的改变。

• 使用"javascript:void(0)"：

  • 如果你不想要URL发生变化。
  • 当你想防止页面滚动到顶部。
  • 当你使用JavaScript来处理点击事件，并且不需要锚点导航的功能。

例子：

1. 使用"#"进行页面内导航：

html
<!-- 定义锚点 -->
<h2 id="section1">Section 1</h2>
...

<!-- 创建到该锚点的链接 -->
<a href="#section1">Go to Section 1</a>

1. 使用"javascript:void(0)"附加事件监听器：

html
<a href="javascript:void(0)" onclick="doSomething();">Click me</a>

<script>
function doSomething() {
    // 执行一些动作，但不改变URL，也不会滚动页面
    alert('Action performed!');
}
</script>

最佳实践：

在现代Web开发中，推荐使用更加语义化的方法，避免使用"javascript:void(0)"，因为它将逻辑（JavaScript代码）与标记（HTML）混合在了一起。更好的做法是使用事件监听器来处理用户的点击事件：

html
<a href="#" id="clickableElement">Click me</a>

<script>
document.getElementById('clickableElement').addEventListener('click', function(event) {
    event.preventDefault(); // 阻止默认行为，即不跳转
    doSomething();
});
</script>

这样的方式保持了HTML的清洁和JavaScript的可维护性，同时event.preventDefault()确保了即使使用了"#"，页面也不会滚动到顶部。这在提升用户体验和网站可维护性方面都是比较好的实践。

The '#' value scrolls the user back to the top of the page, so I generally prefer javascript:void(0).

The javascript:; syntax functions similarly to javascript:void(0);.

Neither is recommended. If you have a meaningful URL, use it as the HREF. If users middle-click your link to open it in a new tab or have JavaScript disabled, the onclick event won't fire. If this isn't feasible, at least use JavaScript with appropriate click event handlers to inject anchor tags into the document. I recognize that this isn't always possible, but I believe it should be pursued when developing any public website. See Unobtrusive JavaScript and Progressive Enhancement (both from Wikipedia).

I use javascript:void(0). There are three reasons.

Encouraging the use of # in development teams inevitably leads some developers to misuse the return value of functions like this:

javascript
function doSomething() {
    // Some code
    return false;
}

They might use return doSomething() but later forget to include return false; in the onclick and simply use doSomething().

The second reason to avoid is that if the called function throws an error, the # link will not execute. Therefore, developers must also remember to handle any errors appropriately within the called function.

The third reason is the presence of cases where onclick is dynamically assigned to event attributes. I prefer being able to dynamically call or assign functions without having to write separate function code for each attachment method. Therefore, my onclick (or any other) HTML attribute looks like this:

javascript
onclick="someFunc.call(this)"

or

javascript
onclick="someFunc.apply(this, arguments)"

Using javascript:void(0) avoids all these problematic issues, and I have not found any drawbacks.

Therefore, if you are a solo developer, you can obviously make your own choice, but if you work as a team, you must declare:

Use href="#" and ensure that onclick always includes return false; at the end, that any called function does not throw errors, and if functions are dynamically attached to attributes, ensure that onclick returns and does not throw errors.

Or

Use href="javascript:void(0)"

The second option is clearly easier to communicate.