Vue.js阻止事件冒泡：嵌套Div点击仅触发子元素方法

嘿，我知道你卡在哪了！你现在用的preventDefault()其实是用来阻止浏览器的默认行为（比如点击链接跳转、表单自动提交这类），但你现在要解决的是事件冒泡问题——也就是内层div的点击事件触发后，会向上冒泡到外层div，导致action1也跟着执行。

要实现点击第二个div时仅触发action2，有两种简单的方法：

方法一：在事件处理函数中阻止冒泡 #

把你当前的action2方法改成这样，调用event.stopPropagation()来阻止事件向上冒泡：

action2(event) {
  // 如果你确实需要阻止浏览器默认行为，保留这行；不需要的话可以删掉
  event.preventDefault();
  // 关键：阻止事件冒泡到父元素
  event.stopPropagation();
  // 这里写你的业务逻辑
}

方法二：使用Vue的事件修饰符（更简洁） #

Vue提供了专门的.stop修饰符来阻止事件冒泡，直接在模板里就能搞定，甚至不用手动处理事件对象：

<div @click="action1"> 
  <!-- 用.stop阻止冒泡，.prevent如果不需要可以去掉 -->
  <div @click.stop.prevent="action2"></div> 
</div>

这样点击内层div时，事件不会冒泡到外层，只会触发action2。如果你的场景不需要阻止默认行为，只保留.stop就够了：@click.stop="action2"。

内容的提问来源于stack exchange，提问作者user2950593