img

Vue中@click.stop与@click.prevent、@click.native

2023-03-22 0条评论 455次阅读 JavaScript


@click.native

在组件中时常看到@click.native。在项目中遇到后,简单介绍下:
@click.native是给组件绑定原生事件

<ListCell v-for="(list, index) in lists" :key="index" @click.native="handleClick(list, index)">
    <ListItem>{{list}}</ListItem>
</ListCell>

@click.stop

元素中添加了一个click事件,其下面的子元素中也添加了click事件,此时,我想点击子元素获取子元素的点击事件,但却触发的是父元素的事件:

<view class="footer-box" @click="clickCard">
        <view @click.stop="footerClick('喜欢')"><text class="footer-box__item">喜欢</text></view>
        <view @click.stop="footerClick('评论')"><text class="footer-box__item">评论</text></view>
        <view @click.stop="footerClick('分享')"><text class="footer-box__item">分享</text></view>
</view>

此时,我们就需要使用@click.stop:阻止事件冒泡方法来解决这个问题。

@click.prevent

阻止事件的默认行为,例如:在代码里写入一个a标签,点击会跳转到目标链接网页中:

<view class="example-body">
    <a href="http://www.baidu.com">百度</a>
</view>

但如果我们不想让它跳转但还想使用a标签的话,此时就需要使用@click.prevent方法,这时再点击a标签的时候就不会跳转目标地址链接了。

🏷️ #点击事件

💬 COMMENT


🦄 支持markdown语法

👋友