【vue3】Vueのイベント修飾子と例

Vue のイベント修飾子:

• 防止: デフォルトのイベントを防止します (一般的に使用されます)。
• stop: イベントのバブリングを防止します (一般的に使用されます)。
• Once: イベントは 1 回だけトリガーされます (一般的に使用されます)
• キャプチャ: イベント キャプチャ モードをオンにします。
• self: バブリング動作を防止します。event.target が現在の操作の要素である場合にのみイベントがトリガーされます。

1.Prevent はデフォルトのイベントを防止します。

<!-- prevent阻止默认事件 点击无法跳转 -->
<a @click.prevent href="https://www.baidu.com/">百度</a>
<a href="https://www.baidu.com/"> 百度</a>

2. stop はイベントのバブルアップを防ぎます。

3. キャプチャはイベントのキャプチャ モードをオンにします

合併症

4. self はバブリング動作を防止し、event.target が現在の操作の要素である場合にのみイベントがトリガーされます。

5. 1 回: イベントは 1 回だけトリガーされます (一般的に使用されます)

関連コード:

<script>
export default {
      
      
  methods: {
      
      
	  say(message) {
      
      
    	alert(message)
  	},
    show(e){
      
      
      console.log(e)
    }
	}
}
</script>

<template>
  <!-- prevent阻止默认事件 点击无法跳转 -->
	<a @click.prevent href="https://www.baidu.com/">百度</a>
	<a href="https://www.baidu.com/"> 百度</a>
  
  <div style="background-color: pink" @click="show(1)">
    div1
    <div style="background-color: yellow;width:50px;" @click="show(3)">
      div2
      <div @click="show(2)">
        div3
      </div>
    </div>
  </div>
</template>

練習場: vuejs.org