click.stop 阻止事件冒泡

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

- `click` 修饰符用于监听鼠标点击事件,并触发相应的处理函数。如果在处理函数中使用了 `event.preventDefault()`,则会阻止默认的行为,例如阻止表单提交或链接跳转等。

- `click.stop` 修饰符也用于监听鼠标点击事件,并触发相应的处理函数。但是,它会阻止事件继续传播,即阻止事件向上冒泡到父元素。这意味着,如果在一个嵌套的元素上使用了 `click.stop` 修饰符,那么当该元素被点击时,该元素上的处理函数会被触发,但是事件不会继续传播到父元素上。

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





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

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



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

你可能感兴趣的:(VUE,JS,javascript,前端,vue.js)