UNIAPP郭
UNIAPP郭
  • 发布:2023-08-23 10:14
  • 更新:2023-11-08 09:59
  • 阅读:1030

【报Bug】H5谷歌浏览器下 input 标签 设置 disabled 后,click事件不触发

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: macOS 13.0.1 M1

HBuilderX类型: 正式

HBuilderX版本号: 3.8.12

浏览器平台: Chrome

浏览器版本: 116.0.5845.110

项目创建方式: HBuilderX

App下载地址或H5⽹址: https://tk.emi99.com/#/

操作步骤:
<view class="flex-y-center item">  
     <view class="label">商户类别</view>  
    <view class="flex-1 flex-y-center" @click="toMerchantTypePage">  
        <input class="flex-1" disabled type="text" placeholder="请选择" v-model="merchantForm.mccName"  
                            placeholder-class="defPlaceholder placeholderClass">  
                        <image class="rjt" src="@/static/images/rjt.png" mode="widthFix"></image>  
                    </view>  
                </view>

预期结果:

希望@click事件生效

实际结果:

@click事件不生效

bug描述:

input 标签 设置 disabled 后 click 事件无法触发。

2023-08-23 10:14 负责人:无 分享
已邀请:
爱豆豆

爱豆豆 - 办法总比困难多

我用的安卓(11)手机在 谷歌浏览器 上按照你的写法运行 是可以触发点击事件的
然后我用你给的网址 也是可以触发的

爱豆豆

爱豆豆 - 办法总比困难多

不清楚原因 但是可以使用 css来解决这个问题 让它层级降低就可以触发了
参考代码

<view @click="tapInput">  
    <input style="position: relative;z-index: -1;"disabled type="text" placeholder="请选择">  
</view>
萤火星

萤火星

同样的问题,edge浏览器可以,chrome不行

8***@qq.com

8***@qq.com

测试了chrome116版本会出现这个bug,115版本是正常的,坑死我了,搞了好久,等uniapp官方修复

  • 爱豆豆

    我更新了 然后确实不行了 但是我发现我react的项目中这种写法 也不会触发了 说明这不是uniapp的问题

    2023-08-24 11:29

  • 爱豆豆

    input 增加 style="position: relative;z-index: -1;" 即可

    2023-08-24 11:36

  • 8***@qq.com

    回复 爱豆豆: 谢谢,这个方法可用。

    2023-08-24 13:38

  • 爱豆豆

    回复 8***@qq.com: 哈哈 麻烦给我下吗评论点个赞 谢谢

    2023-08-24 14:45

5***@qq.com

5***@qq.com

这个博客解决了,亲测可以,https://blog.csdn.net/2301_76742166/article/details/132488498

c***@qq.com

c***@qq.com

edge浏览器升级后,也出现这个问题了

要回复问题请先登录注册