HTML | DOM 可取消事件属性

在 HTML 和 DOM 中，许多事件是可以被取消的。这些事件属性通常以“on”开头，如 onclick、onsubmit 等。当事件发生时，如果相应的属性被设置为一个函数，这个函数就会被调用。如果这个函数返回 false，则可以取消该事件的默认行为或后续处理。

取消链接的默认行为

例如，当用户点击一个链接时，浏览器会跳转到链接对应的 URL 页面。但是，通过设置链接的 onclick 属性，可以取消这个默认行为，实现更自定义的跳转行为或者防止误触。

<a href="https://www.baidu.com" onclick="return false;">点击此处不会跳转</a>

取消表单的默认行为

表单的默认行为是在用户点击提交按钮后，将表单内容发送到服务器。同样，通过设置表单的 onsubmit 属性，可以取消这个默认行为，实现自定义的表单交互行为。

<form onsubmit="return false;">
  <label for="username">用户名：</label>
  <input type="text" id="username">
  <label for="password">密码：</label>
  <input type="password" id="password">
  <button type="submit">登录</button>
</form>

取消事件冒泡

在 DOM 中，事件通常会从最低层级的元素开始处理，然后逐级向上冒泡，直到文档的根节点。通过设置事件的 stopPropagation() 方法，可以取消事件的进一步冒泡。

<ul onclick="console.log('UL clicked');">
  <li onclick="console.log('LI clicked');">点击此处不会触发 UL 的 onclick 事件</li>
</ul>

document.querySelector('li').addEventListener('click', function(event) {
  event.stopPropagation();
});

取消默认事件和阻止冒泡

还可以同时使用 preventDefault() 和 stopPropagation() 方法，即取消默认事件和阻止冒泡。

document.querySelector('a').addEventListener('click', function(event) {
  event.preventDefault();
  event.stopPropagation();
  console.log('Link clicked, but the URL will not be followed.');
});

以上代码片段可在 markdown 编辑器中直接使用。