click.stop 阻止事件冒泡

`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"一次。

相关推荐
袁煦丞10 分钟前
一图看懂Docker管理 Portainer:cpoar内网穿透实验室第652个成功挑战
前端·程序员·远程工作
右子37 分钟前
微信小程序开发“闭坑”指南
前端·javascript·微信小程序
AGG_Chan37 分钟前
flutter专栏--深入了解widget原理
开发语言·javascript·flutter
冰镇生鲜37 分钟前
前端模拟 流式文本接口 打字机效果 mockStreamText
javascript
入秋1 小时前
Three.js后期处理实战:噪点 景深 以及色彩调整
前端·javascript·three.js
Asort1 小时前
JavaScript设计模式(七)——桥接模式:解耦抽象与实现的优雅之道
前端·javascript·设计模式
golang学习记1 小时前
从0死磕全栈之Next.js 应用中的认证与授权:从零实现安全用户系统
前端
苏打水com1 小时前
携程前端业务:在线旅游生态下的「复杂行程交互」与「高并发预订」实践
前端·状态模式·旅游
Darenm1111 小时前
深入理解CSS BFC:块级格式化上下文
前端·css
Darenm1111 小时前
JavaScript事件流:冒泡与捕获的深度解析
开发语言·前端·javascript