click.stop 阻止事件冒泡

董厂长2023-07-25 23:37

`click` 和 `click.stop` 都是事件修饰符，用于处理鼠标点击事件。它们的区别在于：

`click` 修饰符用于监听鼠标点击事件，并触发相应的处理函数。如果在处理函数中使用了 `event.preventDefault()`，则会阻止默认的行为，例如阻止表单提交或链接跳转等。
`click.stop` 修饰符也用于监听鼠标点击事件，并触发相应的处理函数。但是，它会阻止事件继续传播，即阻止事件向上冒泡到父元素。这意味着，如果在一个嵌套的元素上使用了 `click.stop` 修饰符，那么当该元素被点击时，该元素上的处理函数会被触发，但是事件不会继续传播到父元素上。

例如，以下代码(Vue 版本)演示了如何在一个按钮上使用 `click` 修饰符来阻止表单提交：

javascript 复制代码

<template>
  <form @submit.prevent="submitForm">
    <button type="submit" @click.prevent="submitForm">Submit</button>
  </form>
</template>

<script>
export default {
  methods: {
    submitForm() {
      // 处理表单提交逻辑
    }
  }
}
</script>

在上面的代码中，当用户点击"Submit"按钮时，`submitForm` 方法会被调用，并且使用了 `prevent` 修饰符来阻止表单提交。

而以下代码演示了如何在一个嵌套的元素上使用 `click.stop` 修饰符来阻止事件冒泡：

javascript 复制代码

<template>
  <div @click="handleClick">
    <button @click.stop>Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Div clicked');
    }
  }
}
</script>

在上面的代码中，当用户点击"Click me"按钮时，只会触发该按钮上的处理函数，而不会触发父元素上的处理函数。因此，控制台只会输出"Div clicked"一次。