.preventDefault() メソッドを使用してボタンクリックイベントを防ぐ方法

Question

このチュートリアルについてはhttps:// vuejs. org/guide/essentials/event-handling.html#accessing-event-argument-in-inline-handlers

以下に示すコードでは、click イベントをキャンセルする通常の動作を期待するために、.preventDefault を呼び出します。言い換えると、.preventDefault が呼び出されると、私の理解では .preventDefault はボタンの通常の機能を無効にするため、ボタンはクリックできなくなると予想しています。 。

しかし、.preventDefault が何の効果もないかのように、ボタンはまだクリック可能です。

.preventDefault を適切に使用してボタンのクリックを無効にする方法を教えてください。

コード:

<テンプレート>
  <div>
      <button v-on:click="warn('msg',$event)">warn</button>
</div>
</テンプレート>

<スクリプト>
    'vue' から {ref} をインポートします

    デフォルトのエクスポート {
      名前: 'アプリ'、
      コンポーネント: {
        こんにちは世界
      }
}
</スクリプト>
 
＜スクリプト設定＞
    const warn = (msg,DOMEvent) => {
      console.log("警告:",msg,"イベント:",DOMEvent);
      DOMEvent.preventDefault()
    }
</script>

Answer 1

preventDefault は次の状況で役立ちます:

• 「送信」ボタンをクリックしたときにフォームの送信を禁止します
• リンクをクリックしたときに、その URL にジャンプしないようにします

あなたのケースでボタンを無効にするには、次を使用できます:

リーリー

Answer 2

preventDefault() はボタンを無効にしませんが、デフォルトのアクションを阻止します。これは主に Submit アクションでわかります。
クリック時にボタンを無効にするには、次のようなことを行う必要があります:

リーリー