<p>给定这个教程 <a href="https://vuejs.org/guide/essentials/event-handling.html#accessing-event-argument-in-inline-handlers">https://vuejs.org/guide/essentials/event-handling.html#accessing-event-argument-in-inline-handlers</a></p> <p>如下所示的代码中，我调用 <code>.preventDefault</code> 来期望取消 <code>click</code> 事件的正常行为。或者换句话说，我期望一旦调用了 <code>.preventDefault</code>，按钮将不再可点击，因为根据我的理解，<code>.preventDefault</code> 将禁用按钮的正常功能。</p> <p>但是实际情况是，按钮仍然可点击，好像 <code>.preventDefault</code> 没有任何效果。</p> <p>请告诉我如何正确使用 <code>.preventDefault</code> 来禁用按钮点击。</p> <p><strong>代码</strong>：</p> <pre class="brush:php;toolbar:false;"><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></pre></p>

const warn = (msg,DOMEvent) => {
  DOMEvent.srcElement.disabled = true;
}

<template>
  <div>
      <button :disabled="isDisabled" 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() //uncomment if needed
      this.isDisabled = true;
    }
</script>