本文旨在阐明 preventDefault() 方法在处理按钮点击事件中的作用，并提供正确的禁用按钮点击行为的 Vue.js 代码示例。通过本文，你将了解 preventDefault() 的实际用途，并学会如何使用 disabled 属性来真正禁用按钮，防止用户交互。
理解 preventDefault() 的作用
preventDefault() 方法用于阻止事件的默认行为。对于 <button> 元素，其默认行为通常是触发表单提交（如果按钮位于表单内）或执行其他预定义的操作。然而，preventDefault() 并不能直接禁用按钮的点击功能，它仅仅是阻止了按钮的默认行为。
举例来说，如果一个按钮位于 <form> 标签内，点击后默认会提交表单。调用 preventDefault() 可以阻止表单提交，但按钮本身仍然可以被点击，只是不再执行提交动作。
如何正确禁用按钮点击
要真正禁用按钮，使其无法被点击，你需要使用 disabled 属性。在 Vue.js 中，可以通过动态绑定 disabled 属性来实现这一点。
以下是一个示例：
<template> <div> <button :disabled="isDisabled" v-on: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(false) 创建一个响应式变量 isDisabled，初始值为 false，表示按钮默认是启用的。
- :disabled=”isDisabled”: 将按钮的 disabled 属性动态绑定到 isDisabled 变量。当 isDisabled 为 true 时，按钮将被禁用；当 isDisabled 为 false 时，按钮将被启用。
- warn 函数: 当按钮被点击时，warn 函数会被调用。在这个函数中，我们将 isDisabled.value 设置为 true，从而禁用按钮。
- preventDefault() (可选): 如果需要阻止按钮的默认行为（例如，阻止表单提交），可以取消注释 DOMEvent.preventDefault()。 但是注意，这并不能禁用按钮，仅仅是阻止默认行为。
注意事项：
- isDisabled 变量必须是响应式的（例如，使用 ref 或 reactive），这样当它的值改变时，按钮的状态才能自动更新。
- 可以在任何需要禁用按钮的地方修改 isDisabled 的值，例如，在异步操作完成之后或者在满足特定条件时。
总结：
preventDefault() 用于阻止事件的默认行为，但不能禁用按钮。要禁用按钮，应该使用 disabled 属性，并将其动态绑定到一个响应式变量。通过这种方式，你可以灵活地控制按钮的启用和禁用状态，从而实现更精确的用户交互控制。