当前位置:   article > 正文

在vue和uni中.stop阻止事件冒泡失败?_uniapp阻止冒泡事件无效

uniapp阻止冒泡事件无效

1问题:

直接看代码

  1. <u-cell-item @click='clickItem(item.title,index)' :title="item.title" arrow-direction="down" :arrow="false"
  2. v-for="(item,index) in phrases" :key="index">
  3. <u-icon v-if="show" @click.stop="handleClick()" slot="right-icon" size="50" custom-prefix="custom-icon"
  4. name="changyonggoupiaorenshanchu"></u-icon>
  5. </u-cell-item>

这里我是使用uview的组件行里面插了icon但是单独点击icon会发现 同时触发了u-cell-item的事件。

但是我发现使用stop并没有直接阻止的事件冒泡

于是我查看uniapp的文档,结果发现 依旧报错event.stopPropagation is not a function"2解决:

这时候我们可以使用.native事件修饰符,在父组件中给子组件绑定一个原生事件,native修饰符用于在自定义组件上监听原生 DOM 事件。通过使用.native修饰符,可以将原生事件绑定到组件的根元素上。

  1. <u-icon v-if="show" @click.native.stop="handleClick()" slot="right-icon" size="50" custom-prefix="custom-icon"
  2. name="changyonggoupiaorenshanchu"></u-icon>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/AllinToyou/article/detail/79441
推荐阅读
相关标签
  

闽ICP备14008679号