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

相关推荐
会豪2 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子2 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶2 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子2 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_2 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
Gracemark2 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
小徐_23332 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin2 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js
遂心_3 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
Moonbit3 小时前
MoonBit 正式加入 WebAssembly Component Model 官方文档 !
前端·后端·编程语言