uni-app button disabled为true时 报错并且被触发

uni-app button disabled为true时 报错并且被触发

开发环境 版本号 项目创建方式
Windows win11 HBuilderX

示例代码：

报错提示TypeError: e2.stopImmediatePropagation is not a function

操作步骤：

报错TypeError: e2.stopImmediatePropagation is not a function

预期结果：

button无法点击

实际结果：

样式发生变化了,但是按钮被触发了,并且控制台报错

bug描述：

button  disabled为true时 报错并且被触发

更多关于uni-app button disabled为true时 报错并且被触发的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复
<template> <button :disabled="true" [@click](/user/click)="btnHandle">12316351</button> </template> <script setup> const btnHandle = () => { console.log(2132); } </script> 这是代码

更多关于uni-app button disabled为true时 报错并且被触发的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 Uni-App 中，如果你将按钮的 disabled 属性设置为 true，理论上按钮应该是不可点击的，并且不会触发点击事件。如果你遇到按钮在 disabled 为 true 时仍然触发点击事件，并且报错，可能是以下几个原因导致的：

1. 检查 disabled 属性的使用方式

确保你在按钮组件中正确使用了 disabled 属性。例如：

<template>
  <button :disabled="isDisabled" [@click](/user/click)="handleClick">Click me</button>
</template>

<script>
export default {
  data() {
    return {
      isDisabled: true,
    };
  },
  methods: {
    handleClick() {
      console.log('Button clicked');
    },
  },
};
</script>

2. 检查事件绑定

确保你没有在父元素或其他地方意外绑定了点击事件，导致即使按钮被禁用，事件仍然被触发。

3. 检查样式问题

有时候，按钮的样式可能会导致它看起来是禁用的，但实际上并没有被禁用。检查你的 CSS 样式，确保按钮在 disabled 为 true 时确实处于禁用状态。

4. 检查 Uni-App 版本

如果你使用的是较旧版本的 Uni-App，可能存在一些 bug。尝试更新到最新版本，看看问题是否仍然存在。

5. 调试和排查

如果以上方法都没有解决问题，可以尝试在 handleClick 方法中添加一些调试信息，看看事件是如何被触发的。例如：

methods: {
  handleClick(event) {
    console.log('Button clicked', event);
    if (this.isDisabled) {
      console.log('Button is disabled but still clicked');
    }
  },
},

6. 使用 v-if 或 v-show

如果你希望在按钮禁用时完全避免点击事件，可以考虑使用 v-if 或 v-show 来控制按钮的显示：

<template>
  <button v-if="!isDisabled" [@click](/user/click)="handleClick">Click me</button>
</template>

或者：

<template>
  <button v-show="!isDisabled" [@click](/user/click)="handleClick">Click me</button>
</template>
回到顶部