javascript中 void(0)的用法以及常见的问题

本文链接：https://blog.youkuaiyun.com/alive_new/article/details/136767930

在JavaScript中，void(0)的主要用途是在事件处理程序或链接中阻止默认的跳转行为。它可以将表达式的结果强制为undefined，从而实现阻止页面跳转的效果。

用法：

阻止链接跳转：点击我不跳转。这样点击链接时，不会触发页面跳转。
在事件处理程序中使用：点击我不执行任何操作。这样点击按钮时，不会执行任何操作。
作为占位符使用：有时在JavaScript中，可能需要在某些语法上下文中使用一个无意义的表达式，而void(0)可以作为一个常用的占位符。

常见问题：

void(0)的返回值是undefined，因此使用它作为表达式的结果可能会导致预期之外的结果。例如，将其赋值给变量或在条件语句中使用时要小心。
在JavaScript开发中，更常见的做法是使用其他技术来处理链接的行为，例如使用事件监听器和event.preventDefault()来阻止默认行为，或使用前端框架提供的路由机制进行页面跳转。

event.preventDefault()

event.preventDefault()是一个事件对象（通常被简称为event）上的方法。它用于阻止事件的默认行为发生。

当某个元素触发一个事件（例如点击、提交表单、按键等），浏览器会执行该事件的默认行为。event.preventDefault()的作用是告诉浏览器不要执行事件的默认行为，而是让开发者自定义处理。

常见的事件默认行为包括：

点击链接时进行页面跳转。
提交表单时进行页面刷新或跳转。
按下某些按键时触发默认的键盘行为，如回车键提交表单或空格键滚动页面等。

通过调用event.preventDefault()，可以阻止这些默认行为的发生，并根据需要执行自定义的操作，或者完全取消事件的进一步处理。

例如，在一个点击事件的处理程序中，你可以使用event.preventDefault()来阻止链接的默认跳转行为，然后根据需要执行其他操作。

需要注意的是，event.preventDefault()只会影响当前事件的默认行为，不会阻止事件的冒泡或捕获阶段的传播。如果需要同时阻止事件传播，请使用event.stopPropagation()方法。

举例

1. 阻止链接的默认行为

html

<a href="https://example.com" id="myLink">点击我</a>

javascript

const link = document.getElementById('myLink');

link.addEventListener('click', function(event) {
  event.preventDefault(); // 阻止默认行为
  // 可以在这里执行自定义操作
  console.log('链接点击被阻止！');
});

在上面的例子中，我们通过document.getElementById()获取到了具有id为"myLink"的链接元素。然后，我们使用addEventListener()方法添加了一个点击事件监听器。在事件处理程序中，我们调用了event.preventDefault()来阻止链接的默认行为，即阻止页面跳转。在这个例子中，我们只是简单地在控制台输出一条消息，但你可以根据需要执行任何自定义操作。

2. 阻止表单提交的默认行为#### html

<form id="myForm">
  <input type="text" name="username">
  <button type="submit">提交</button>
</form>

javascript

const form = document.getElementById('myForm');

form.addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单提交的默认行为
  // 可以在这里执行自定义操作
  console.log('表单提交被阻止！');
});