今天在项目中看到@click.native,@click.stop,查了下资料,总结一下
1、@click
元素点击事件直接使用@click
<span @click="goBackClick"> </span>
2、@click.native
在组件上绑定@click="gaBack"事件,click事件无法触发也不生效,需要通过使用@click.native="gaBack",才能够执行gaBack方法。@click.native只能用在组件
<Header :headerStr="headerStr" @click.native="gaBack"></Header>
3、@click.stop
@click.stop事件冒泡监听,如收藏列表,点击某一数据,可以进入详情,也可以取消收藏。如果不做处理,点击之后会直接进入详情页,取消收藏按钮就无法实现了,这里就需要@click.stop 阻止事件冒泡。
<div class="tab_list_content list_margin" v-for="(item,index) in obj" :key="item.equID" @click="gocollectionDetail(item)">
<div class="tab_list_arrow2" @click.stop="changestate(index)"></div>
</div>
4、@click.prevent
@click.prevent 阻止事件的默认行为
<a href="http://www.baidu.com" @click.prevent="test4">百度一下</a> //阻止a标签跳转,仅执行函数test4
<form action="/xxx" @submit.prevent="test5"> //阻止表单提交,仅执行函数test5
<input type="submit" value="注册">
</form>
5、@keyup.enter
按键修饰符
//按下enter时,执行方法test7
<input type="text" @keyup.enter="test7">methods: {
test7 (event) {
console.log(event.keyCode)
alert(event.target.value)
}
}
