本文旨在澄清 preventDefault() 方法在按钮点击事件中的作用，并提供禁用按钮点击的正确方法。preventDefault() 主要用于阻止元素的默认行为，例如阻止表单提交，但它并不能直接禁用按钮的点击功能。要实现禁用按钮的效果，应使用 disabled 属性，并结合 Vue 的响应式数据来实现动态控制。
理解 preventDefault() 的作用
preventDefault() 方法用于阻止事件的默认行为。对于按钮来说，其默认行为通常是触发表单提交（如果按钮位于表单中）或其他与按钮关联的特定操作。调用 preventDefault() 可以阻止这些默认行为的发生。
但是，preventDefault() 并不会禁用按钮的点击功能。按钮仍然可以被点击，并且绑定的事件处理函数仍然会被执行。它仅仅是阻止了按钮的默认行为。
正确禁用按钮点击：使用 disabled 属性
要真正禁用按钮的点击功能，需要使用 HTML 的 disabled 属性。当 disabled 属性设置为 true 时，按钮将变为不可点击状态，并且通常会呈现为灰色或半透明状态，以指示其禁用状态。
在 Vue 中，可以使用数据绑定来动态控制 disabled 属性的值，从而实现根据特定条件禁用或启用按钮的效果。
示例代码：
<template> <div> <button :disabled="isDisabled" @click="warn('msg', $event)">Warn</button> </div> </template> <script setup> import { ref } from 'vue'; const isDisabled = ref(false); // 初始状态为启用 const warn = (msg, DOMEvent) => { console.log("warn:", msg, " event:", DOMEvent); // DOMEvent.preventDefault() // 如果需要阻止默认行为，可以取消注释 isDisabled.value = true; // 点击后禁用按钮 }; </script>
代码解释：
- isDisabled 变量： 使用 ref 创建一个名为 isDisabled 的响应式变量，初始值为 false，表示按钮默认情况下是启用的。
- :disabled=”isDisabled”： 通过 :disabled 属性将 isDisabled 变量绑定到按钮的 disabled 属性。当 isDisabled 的值为 true 时，按钮将被禁用；当值为 false 时，按钮将被启用。
- warn 函数： 在 warn 函数中，将 isDisabled.value 设置为 true。这意味着当按钮被点击时，warn 函数会被调用，并且 isDisabled 的值会变为 true，从而禁用按钮。
如何启用按钮？
要重新启用按钮，只需将 isDisabled.value 设置回 false 即可。例如，可以在某个事件或条件发生时，将 isDisabled.value 设置为 false，从而重新启用按钮。
注意事项：
- preventDefault() 适用于阻止元素的默认行为，例如阻止表单提交。
- disabled 属性用于禁用按钮的点击功能。
- 在 Vue 中，可以使用数据绑定来动态控制 disabled 属性的值，从而实现根据特定条件禁用或启用按钮的效果。
总结：
要禁用按钮的点击功能，请使用 disabled 属性，并结合 Vue 的响应式数据来实现动态控制。preventDefault() 方法不能禁用按钮的点击功能，它仅仅是阻止了按钮的默认行为。理解 preventDefault() 和 disabled 属性的不同作用，可以帮助你更好地控制按钮的行为，并构建更健壮的 Vue 应用。