Vue的事件修饰符

阻止默认事件

在a标签中，点击之后会默认跳转到一个页面，即使我们给他加了个点击事件也只会显示一瞬间就没了。

如果需要阻止可以通过event对象来阻止默认事件，加上之后我们无论点多少次都不会进行跳转。

aclick(e){
        e.preventDefault();
        console.log("点击了a标签");
      }
aclick(e){
        e.preventDefault();
        console.log("点击了a标签");
      }
aclick(e){
				e.preventDefault();
				console.log("点击了a标签");
			}

然后我们也可以通过事件修饰符直接进行阻止。

<template>
  <a @click.prevent="aclick" href="https://blog.zmkj.cn/">造梦空间论坛</a>
</template>
<script>
  export default {
    data(){
      return{
        
      }
    },
    methods: {
      aclick(e){
        // e.preventDefault();
        console.log("点击了a标签");
      }
    }
    
  }
</script>
<template>
  <a @click.prevent="aclick" href="https://blog.zmkj.cn/">造梦空间论坛</a>
</template>

<script>
  export default {
    data(){
      return{
        
      }
    },
    methods: {
      aclick(e){
        // e.preventDefault();
        console.log("点击了a标签");
      }
    }
    
  }
</script>
<template>
	<a @click.prevent="aclick" href="https://blog.zmkj.cn/">造梦空间论坛</a>
</template>

<script>
	export default {
		data(){
			return{
				
			}
		},
		methods: {
			aclick(e){
				// e.preventDefault();
				console.log("点击了a标签");
			}
		}
		
	}
</script>

事件冒泡

在触发子元素的同时事件冒泡也会触发到父元素，如果我们不想触发父级的，也可以加上修饰符stop。

<template>
  <a @click.prevent="aclick" href="https://blog.zmkj.cn/">造梦空间论坛</a>
  <div @click="divclick">
    <p @click.stop="pclick">
      测试
    </p>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        
      }
    },
    methods: {
      aclick(e){
        // e.preventDefault();
        console.log("点击了a标签");
      },
      divclick(){
        close("div")
      },
      pclick(){
        console.log("p");
      }
    }
    
  }
</script>
<template>
  <a @click.prevent="aclick" href="https://blog.zmkj.cn/">造梦空间论坛</a>
  <div @click="divclick">
    <p @click.stop="pclick">
      测试
    </p>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        
      }
    },
    methods: {
      aclick(e){
        // e.preventDefault();
        console.log("点击了a标签");
      },
      divclick(){
        close("div")
      },
      pclick(){
        console.log("p");
      }
    }
    
  }
</script>
<template>
	<a @click.prevent="aclick" href="https://blog.zmkj.cn/">造梦空间论坛</a>
	<div @click="divclick">
		<p @click.stop="pclick">
			测试
		</p>
	</div>
</template>

<script>
	export default {
		data(){
			return{
				
			}
		},
		methods: {
			aclick(e){
				// e.preventDefault();
				console.log("点击了a标签");
			},
			divclick(){
				close("div")
			},
			pclick(){
				console.log("p");
			}
		}
		
	}
</script>