Vue基础教程（72）事件修饰符之stop：别让点击事件像野马一样乱跑！Vue这个.stop修饰符简直太香了

为啥我们需要.stop这个“事件终结者”？

想象一下这个场景：你精心设计了一个弹出框，里面有个“确定”按钮。用户点击按钮时，不仅触发了按钮的点击事件，连弹出框的关闭事件也跟着触发了！这就是前端开发中经典的事件冒泡问题。

事件冒泡就像往水里扔石头，涟漪会从中心一圈圈向外扩散。在DOM中，事件也是从最具体的元素开始，然后逐级向上传播到更一般的元素。有时候这很实用，但有时候...它就是来捣乱的！

这时候，Vue的.stop修饰符就像是事件传播的“终结者”，它告诉事件：“就到这里，别再往上传播了！”简单来说，它就是event.stopPropagation()的语法糖，但用起来那叫一个优雅！

.stop修饰符到底是个啥？

先来看个简单的例子，没有.stop的日子有多苦：

<div @click="handleDivClick">
  <button @click="handleButtonClick">点击我</button>
</div>
<script>
export default {
  methods: {
    handleDivClick() {
      console.log('div被点击了！');
    },
    handleButtonClick() {
      console.log('按钮被点击了！');
    }
  }
}
</script>

当你点击按钮时，控制台会输出：

按钮被点击了！
div被点击了！

看到了吗？按钮的点击事件触发了，div的点击事件也跟着触发了！这就像是你想关掉网页上的一个弹窗，结果连整个网页都关闭了，简直让人崩溃。

现在请出我们的救星——.stop修饰符：

<div @click="handleDivClick">
  <button @click.stop="handleButtonClick">点击我</button>
</div>

同样的点击操作，现在控制台只会输出：

按钮被点击了！

div的点击事件被成功阻止了！是不是感觉世界瞬间清净了？

深入原理：.stop到底在背后做了什么？

可能有同学要问了：“这不就是event.stopPropagation()吗？有什么了不起的？”没错，本质上确实是，但.stop修饰符的优势在于它的简洁性和一致性。

在传统JavaScript中，我们要这样写：

document.querySelector('button').addEventListener('click', function(event) {
  event.stopPropagation();
  // 其他处理逻辑
});