JS 阻止默认行为|极客笔记

JS 阻止默认行为

在前端开发中，经常会遇到需要阻止元素的默认行为的情况，例如点击链接不跳转、表单提交不刷新页面等。在这种情况下，我们可以通过 JavaScript 来实现阻止默认行为的操作。本文将详细介绍如何使用 JavaScript 来阻止元素的默认行为。

当用户点击一个链接时，浏览器会默认跳转到链接指定的地址，但有时我们希望点击链接时只执行特定的操作，而不跳转到新页面。这时，我们可以通过 JavaScript 来阻止链接的默认跳转行为。

document.querySelector('a').addEventListener('click', function(event) {
  event.preventDefault();
  // 执行自定义操作
});

上面的代码通过 addEventListener 方法监听了链接的点击事件，并在事件处理函数中调用了 preventDefault 方法来阻止链接的默认跳转行为。这样，当用户点击链接时，页面不会跳转，而是执行事件处理函数中的自定义操作。

在用户提交表单时，浏览器会默认刷新页面并发送表单数据到服务器。有时我们希望在用户点击提交按钮时执行特定的操作，而不刷新页面。这时，我们可以通过 JavaScript 来阻止表单的默认提交行为。

document.querySelector('form').addEventListener('submit', function(event) {
  event.preventDefault();
  // 执行自定义操作
});

上面的代码通过 addEventListener 方法监听了表单的提交事件，并在事件处理函数中调用了 preventDefault 方法来阻止表单的默认提交行为。这样，当用户点击提交按钮时，页面不会刷新，而是执行事件处理函数中的自定义操作。

除了链接和表单，按钮也有默认的点击行为，例如提交按钮会触发表单的提交操作。有时我们希望点击按钮时只执行特定的操作，而不触发默认行为。这时，我们可以通过 JavaScript 来阻止按钮的默认点击行为。

document.querySelector('button').addEventListener('click', function(event) {
  event.preventDefault();
  // 执行自定义操作
});

上面的代码通过 addEventListener 方法监听了按钮的点击事件，并在事件处理函数中调用了 preventDefault 方法来阻止按钮的默认点击行为。这样，当用户点击按钮时，不会触发默认行为，而是执行事件处理函数中的自定义操作。

除了链接、表单和按钮，其他元素也可能有默认行为，例如键盘输入时会触发 keydown 事件、滚动页面时会触发 scroll 事件等。在这些情况下，我们同样可以通过 JavaScript 来阻止元素的默认行为。

document.addEventListener('keydown', function(event) {
  event.preventDefault();
  // 执行自定义操作
});

上面的代码通过 addEventListener 方法监听了整个文档的 keydown 事件，并在事件处理函数中调用了 preventDefault 方法来阻止键盘输入的默认行为。这样，当用户按下键盘时，不会触发默认行为，而是执行事件处理函数中的自定义操作。

通过 JavaScript 阻止元素的默认行为，可以实现更加灵活和定制化的交互效果。在实际开发中，我们可以根据需求使用上述方法阻止链接、表单、按钮和其他元素的默认行为，从而达到更好的用户体验和交互效果。