Vue中如何阻止事件冒泡，实现长尾词效果？

本文共计683个文字，预计阅读时间需要3分钟。

目录- 如何阻止事件冒泡- 科学- 阻止click事件冒泡（防止触发生命周期另一个事件）- 方法一- 方法二- 如何阻止事件冒泡- 当父子元素中都有点击事件时，为了避免触发生命周期中的另一个事件，此时，为了使触发的元素中的事件在点击事件发生时，不执行其他操作- 不执行

目录

• 如何阻止事件冒泡
• 科普
• 阻止click事件冒泡(防止触发另一个事件)的方法
• 方法一
• 方法二

如何阻止事件冒泡

当父子元素中都有点击事件的时候，为了让触发子元素中的事件时，不去触发父元素中的事件，可以在子元素事件中添加stop来阻止事件冒泡。

如图，在button的点击事件中加上stop，触发addStatus的时候，就不会去触发父元素中的showColorStatus事件。