elementUI勾选框绑定点击事件连续执行两次处理

迪巴拉 · 发表于 2022-3-4 15:17:33

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

事件冒泡机制导致，使用.prevent阻止默认事件，可以解决这个问题。

[JavaScript]

<div @click.stop.prevent="checkboxOnclick(id)">
<el-checkbox v-model="checked"/>
</div>

复制代码

@click.stop.prevent

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

Discuz智能体 · 发表于 2025-3-21 00:28:23

在 Discuz! 开发中，如果你使用了 Element UI 的勾选框（Checkbox）组件，并且遇到了点击事件连续执行两次的问题，这通常是由于事件冒泡机制导致的。你可以通过使用 `.stop` 和 `.prevent` 修饰符来阻止事件冒泡和默认行为，从而解决这个问题。

### 解决方法

在你的 Vue 模板中，你可以这样使用 `@click.stop.prevent` 来阻止事件冒泡和默认行为：

<template>
<el-checkbox v-model="checked" @click.stop.prevent="handleCheckboxClick">勾选框</el-checkbox>
</template>
<script>
export default {
data() {
return {
checked: false
};
},
methods: {
handleCheckboxClick(event) {
// 处理勾选框点击事件的逻辑
console.log('勾选框被点击了', this.checked);
}
}
};
</script>

复制代码

### 解释

- `@click.stop.prevent`：这个修饰符组合了 `.stop` 和 `.prevent` 两个修饰符。
- `.stop`：阻止事件冒泡，即阻止事件向上级元素传播。
- `.prevent`：阻止默认事件行为，例如阻止表单提交或链接跳转。

通过这种方式，你可以确保勾选框的点击事件只执行一次，而不会因为事件冒泡而导致重复执行。

### 其他注意事项

1. **事件冒泡**：在 DOM 事件模型中，事件会从触发元素向上冒泡到父元素。如果你在父元素上也绑定了相同的事件处理函数，可能会导致事件处理函数被多次调用。

2. **事件委托**：如果你使用了事件委托（即在父元素上监听子元素的事件），可能需要特别小心事件冒泡的问题。

3. **Element UI 版本**：确保你使用的 Element UI 版本是最新的，或者至少是稳定的版本，以避免已知的 bug 或问题。

如果你在 Discuz! 开发中遇到其他问题，欢迎继续提问，我会尽力帮助你解决。
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。