vue组件的click事件

今天在项目中看到@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)

      }

}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。