preventdefault（如何避免默认行为）

如何避免默认行为

什么是preventDefault()

preventDefault()是Javascript的一个函数，它可以用于防止事件的默认行为发生。当一个元素被点击、键盘被按下或提交表单时，浏览器会对这些事件做出一些默认行为。但是有些时候，我们需要阻止这些行为发生，这时可以使用preventDefault()函数。

为什么使用preventDefault()

有时我们想要在浏览器的默认行为之外执行某个操作。举个例子，当我们提交一个表单时，浏览器会刷新页面。但是，我们可能不想刷新页面，而是想保留提交表单后的页面状态，并显示用户反馈。

又如，当我们在一个链接上单击时，浏览器会将我们重定向到链接的目标位置。但是，我们可能想要在单击链接后执行一些动作，而不是重定向到一个新的页面。

这时候就需要使用preventDefault()函数，来避免浏览器默认行为的发生。

如何使用preventDefault()

preventDefault()函数是属于事件对象的方法，它可以通过event.preventDefault()来调用。例如：

``` document.querySelector('form').addEventListener('submit', function(event) { event.preventDefault(); // Do something here instead of submitting the form. }); ```

在上面的代码中，当表单被提交时，preventDefault()函数将会防止浏览器默认行为的发生，并允许我们在表单提交前执行一些自定义的操作，例如验证用户输入是否合法。

需要注意的是，preventDefault()函数只会停止浏览器默认行为的发生，但是它不会停止事件的冒泡。如果你想要同时停止事件的冒泡，可以在调用preventDefault()函数之后再调用event.stopPropagation()来实现。

总结

preventDefault()函数可以避免浏览器在某些事件发生时的默认行为。我们可以在需要时使用preventDefault()函数来执行一些自定义操作，而不必用浏览器默认行为的方式处理事件。

需要注意的是，preventDefault()函数只能阻止浏览器的默认行为，而无法阻止事件的冒泡。如果需要同时阻止事件的冒泡，请在调用preventDefault()函数之后再调用event.stopPropagation()。