给出本教程https://vuejs.org/guide/essentials/event-handling.html#accessing-event-argument-in-inline-handlers
如下面的代码所示,我正在调用.preventDefault
,期望取消click
发射器的正常行为。或者,换句话说,我希望一旦调用了. preventDefault
,按钮将不再可单击,因为我认为,根据我的理解,.preventDefault
将禁用按钮的正常功能。
但发生的是,按钮n仍然是可点击的,好像.preventDefault
没有效果。
请让我知道如何禁用按钮点击使用.preventDefault
正确
代码:
<template>
<div>
<button v-on:click="warn('msg',$event)">warn</button>
</div>
</template>
<script>
import {ref} from 'vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<script setup>
const warn = (msg,DOMEvent) => {
console.log("warn:",msg," event:",DOMEvent);
DOMEvent.preventDefault()
}
</script>
4条答案
按热度按时间5f0d552i1#
preventDefault()
不会禁用按钮,但会阻止其默认操作,主要是在Submit
操作的情况下。要禁用单击按钮,您需要执行以下操作:
ss2ws0br2#
preventDefault在以下情况下非常有用:
要在您的案例中禁用按钮,您可以用途:
ykejflvf3#
event.preventDefault()
停止当前事件对页面的作用。要禁用按钮,可以将其
disabled
属性设置为true。idfiyjo84#
看起来你没有正确使用
preventDefault
方法。阅读MDN Event.preventDefault()文档以更好地了解如何使用它。
首先,要禁用一个按钮,可以简单地使用
disabled
属性理想情况下,您可能只想使用
v-bind:
指令有条件地禁用它。