事件是 JavaScript 中非常重要的一个概念，它让我们可以对用户的行为做出反应并作出相应的操作。在处理事件时，我们通常会使用 event.preventDefault() 方法来阻止浏览器对事件的默认行为进行处理。本文将详细介绍 event.preventDefault() 方法的应用实例。
阻止表单提交
在 HTML 中，当用户点击提交按钮时，会自动触发表单的提交事件。如果我们希望在用户点击提交按钮后不进行表单的提交，可以在提交事件中调用 event.preventDefault() 方法。如下示例代码：
-- -------------------- ---- ------- ------ ------ ----------- -------------- ------- --------------------------- ------- -------- --- ---- - ----------------------------------------- --- --------- - -------------------------------------- ----------------------------------- --------------- - -- ------ ----------------------- -- ----------- --- -------- - ------------------------------------------ -------------------- ---------- --- ---------展开代码
在上面的代码中，我们阻止了表单的提交事件，并在事件处理函数中获取了用户名并进行了一些处理。
阻止链接跳转
在 HTML 中，当用户点击链接时，会自动跳转到链接目标地址。如果我们希望在用户点击链接时不进行跳转，可以在链接点击事件中调用 event.preventDefault() 方法。如下示例代码：
-- -------------------- ---- ------- -- ---------------------------- --------------------- -------- --- ------ - ----------------------------------- -------------------------------- --------------- - -- ------ ----------------------- -- -------- --------------------- --- ---------展开代码
在上面的代码中，我们阻止了链接点击事件，并在事件处理函数中打印了一条信息。
阻止键盘事件的默认行为
在处理键盘事件时，有些键的默认行为可能会影响我们的操作。比如，当用户按下回车键时，在某些情况下会触发表单的提交事件，这可能并不是我们希望看到的。如果我们希望在按下回车键时不进行表单的提交，可以在键盘事件处理函数中调用 event.preventDefault() 方法。如下示例代码：
-- -------------------- ---- ------- ------ ------ ----------- -------------- ------- -------- --- ---- - ----------------------------------------- -------------------------------- --------------- - -- --------- -- -------------- --- --- - -- ------ ----------------------- -- ----------- --- -------- - ------------------------------------------ -------------------- ---------- - --- ---------展开代码
在上面的代码中，我们拦截了键盘事件，并在按下回车键时阻止了表单的提交事件。
拖拽事件
在 HTML5 中，我们可以使用拖拽事件来实现元素的拖拽效果。如果我们希望在拖拽时不使用浏览器的默认处理方式，可以在拖拽事件处理函数中调用 event.preventDefault() 方法。如下示例代码：
-- -------------------- ---- ------- ---- ---------------------- -------- --- ----- - ---------------------------------- ----------------------------------- --------------- - -- ------ ----------------------- -------------------- --- ------------------------------ --------------- - ------------------- --- --------------------------------- --------------- - -------------------- --- ---------展开代码
在上面的代码中，我们阻止了拖拽事件的默认行为，并在拖拽事件处理函数中打印了一些信息。
小结
event.preventDefault() 方法是事件处理中经常使用的方法，它可以用来阻止浏览器对事件的默认行为进行处理。本文详细介绍了 event.preventDefault() 方法的多个应用实例，并提供了相应的示例代码，希望能够对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b6fb1c306f20b3a63820c3
