Vue之监听事件

1. stop   在click后面加一个 .stop， 冒泡到了这里就结束了，就不会冒到上级 @click.stop="doc"
2. .prevent  @click.prevent="doc"提交事件不再重载页面
3. .capture  在当前事件上加@click.capture="doc"，会让其优先捕捉事件，优先级高于子事件。
4. .self  @click.self="doc" 只有点击自己，才会导致事件发生
5. .once @click.once="doc"  事件只能点击一次

 

<style type="text/css">
		   #content{
		       margin: 0 auto;
		       text-align:center;
		       line-height: 40px;
		   }
		   div {
		       width: 100px;
		       cursor:pointer;
		   }
		   #grandFather {
		       background: green;
		   }
		   #father {
		       background: blue;
		   }
		   #me {
		       background: red;
		   }#son {
		        background: gray;
		    }
</style>

                <div id="content">
		    <div id="grandFather"  v-on:click="doc">
		        grandFather
		        <div id="father" v-on:click="doc">
		            father
		            <div id="me" v-on:click="doc">
		                me
		                <div id="son" v-on:click="doc">
		                son
		            </div>
		            </div>
		        </div>
		    </div>
		</div>

 

 

<script type="text/javascript">
	var content = new Vue({
		el:'#content',
		data:{
			id: ''
		},
		methods:{
			doc:function(){
				this.id = event.currentTarget.id;
				alert(this.id);
			}
		}
	})
</script>

 

来源：CSDN

作者：zyupupup

链接：https://blog.csdn.net/zyupupup/article/details/103488788