JavaScript阻止默认行为
在Web开发中，我们经常需要处理用户的交互行为，并对其进行相应的处理。有时候，浏览器会对某些交互行为有默认的处理方式，比如点击链接会跳转到目标页面，提交表单会刷新页面等。然而，有时候我们并不希望浏览器执行这些默认行为，而是希望通过JavaScript来自定义处理方式。本文将介绍如何通过JavaScript阻止默认行为，并给出相应的代码示例。
阻止链接的默认行为
首先，让我们看一个最常见的场景，点击链接会跳转到目标页面。通常情况下，我们希望在点击链接时执行一些自定义操作，而不是直接跳转到目标页面。这时，我们可以通过阻止链接的默认行为来实现。
<a rel="nofollow" href=" onclick="event.preventDefault();">点击我</a>
在上面的代码中，我们使用了onclick事件来触发JavaScript代码。在点击链接时，onclick事件会被触发，然后我们调用event.preventDefault()方法来阻止链接的默认行为。这样，当点击链接时，浏览器将不会跳转到目标页面，而是执行我们自定义的操作。
阻止表单提交的默认行为
另一个常见的场景是阻止表单提交的默认行为。在默认情况下，当用户点击表单的提交按钮时，浏览器会刷新页面并发送表单数据到服务器。然而，有时候我们希望在提交表单时执行一些其他的操作，而不是刷新页面。这时，我们可以通过阻止表单提交的默认行为来实现。
<form onsubmit="event.preventDefault();">
<input type="text" name="name">
<input type="submit" value="提交">
</form>
在上面的代码中，我们使用了onsubmit事件来触发JavaScript代码。在提交表单时，onsubmit事件会被触发，然后我们调用event.preventDefault()方法来阻止表单的默认行为。这样，当点击表单的提交按钮时，浏览器将不会刷新页面，而是执行我们自定义的操作。
阻止其他默认行为
除了链接的默认行为和表单提交的默认行为，JavaScript还可以阻止其他一些默认行为。比如，阻止鼠标右键的默认行为，阻止键盘按键的默认行为等等。下面是一些常用的示例代码：
// 阻止鼠标右键的默认行为
document.addEventListener('contextmenu', function(event) {
event.preventDefault();
});
// 阻止键盘按键的默认行为
document.addEventListener('keydown', function(event) {
event.preventDefault();
});
在上面的代码中，我们使用了addEventListener方法来监听相应的事件。在事件的回调函数中，我们调用event.preventDefault()方法来阻止相应的默认行为。
总结
通过JavaScript阻止默认行为，我们可以在用户交互时执行自定义操作，而不受浏览器默认行为的限制。我们可以通过event.preventDefault()方法来阻止链接的默认行为、表单提交的默认行为以及其他一些默认行为。这样，我们就能够更加灵活地处理用户的交互行为，并提供更好的用户体验。
journey
title 阻止默认行为示例
section 点击链接
click "点击链接" as click_link
linkText("点击我") as link
click_link --> link
link -->|阻止默认行为| JavaScript代码
section 提交表单
click "点击提交按钮" as click_submit
formText("表单") as form
click_submit --> form
form -->|阻止默认行为| JavaScript代码
section 鼠标右键
rightClick "右键点击" as right_click
documentText("文档") as doc
right_click --> doc
doc -->|阻止默认行为| JavaScript代码
section 键盘按键
keyPress "按键按下" as key_press
document
