javascript 如何通过.preventDefault()禁用按钮单击

2exbekwf  于 2023-05-21  发布在  Java
关注(0)|答案(4)|浏览(132)

给出本教程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>
5f0d552i

5f0d552i1#

preventDefault()不会禁用按钮,但会阻止其默认操作,主要是在Submit操作的情况下。
要禁用单击按钮,您需要执行以下操作:

<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>
ss2ws0br

ss2ws0br2#

preventDefault在以下情况下非常有用:

  • 单击“提交”按钮,阻止其提交表单
  • 点击链接,阻止链接跟随URL

要在您的案例中禁用按钮,您可以用途:

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

ykejflvf3#

event.preventDefault()停止当前事件对页面的作用。
要禁用按钮,可以将其disabled属性设置为true。

button.addEventListener('click', () => {
 button.disabled = true;
 button.textContent = 'Cant touch this';
})
<button id="button">Click Me</button>
idfiyjo8

idfiyjo84#

看起来你没有正确使用preventDefault方法。
阅读MDN Event.preventDefault()文档以更好地了解如何使用它。
首先,要禁用一个按钮,可以简单地使用disabled属性

<button v-on:click="warn('msg',$event)" disabled>warn</button>

理想情况下,您可能只想使用v-bind:指令有条件地禁用它。

<template>
    <div>
        <button v-on:click="warn('msg',$event)" v-bind:disabled="isDisabled">warn</button>

        <!-- A new button to toggle disabled state -->
        <button v-on:click="toggleDisabledState">Toggle</button> 
    </div>
</template>
... 

<script setup>
    import {ref} from 'vue'

    const isDisabled = ref(false);

    const warn = (msg,DOMEvent) => {
      console.log("warn:",msg," event:",DOMEvent);
    }

    // toggle method
    const toggleDisabledState = () => {
      isDisabled.value = !isDisabled.value
    } 
</script>

相关问题