【uniapp】解决在H5谷歌浏览器下 u-input 标签 设置只读后,click事件不生效

news/2024/7/7 23:32:29

【问题描述】
谷歌浏览器更新后,h5模式下原本的input外层view中的@click事件不触发了??
但是更换浏览器后就可以,打包app也是正常可以触发的,本来是没打算兼容h5,既然遇到了就记录一下~
在这里插入图片描述

在这里插入图片描述

【解决办法】

使u–input里写上readonly&disabled为true之后,在外层的view上写的点击事件生效

给input中加一个css属性pointer-events: none;就可以解决了

<u-input style="pointer-events: none;">

【原因说明】

在一般情况下,被只读&禁用的u-input元素会拦截所有的鼠标事件,导致外层的view上写的点击事件不再生效。而加上pointer-events: none;后,u–input就不再拦截鼠标事件,外层的view上的点击事件就能够正常生效了。

pointer-events: none 的作用是让元素实体 “虚化”,我们可以看到这个标签,但只是一个虚幻的影子而已,类似于海市蜃楼

注意:由于兼容性差异,nvue下需使用u–input,非nvue下需使用u-input


			<!-- #ifndef APP-NVUE -->
			<u-input placeholder="前置插槽">
			<!-- #endif -->
			<!-- #ifdef APP-NVUE -->
			<u--input placeholder="前置插槽">
			<!-- #endif -->

http://lihuaxi.xjx100.cn/news/1761435.html

相关文章

将json数据导入到ES集群——解决方案对比填坑日记

需求 将写好的json数据。导入到es集群 数据说明 文件JSON数据&#xff0c;一行一个JSON。 {"id":"d2716ae8fba4e026c4bd9445c3f49e2c","lang":"zh","title":"吉美旅馆","content":"吉美..."}…

[CISCN2019 华北赛区 Day2 Web1]Hack World1

提示 基于布尔的盲注使用python脚本跑 这里已经提示flag在flag表在flag字段 首先输入1 2都能有回显 每当这个时候第一想到的都应该是基于布尔的盲注是否能使用 尝试fuzz 通过fuzz大概知道后续思路 应为过滤的比较全面所以放弃联合查询 报错查询 预设置 使用基于布尔的盲注…

北京皮肤性病科主任谭巍揭示:脖子赘生物形成的原因

在日常生活中&#xff0c;我们可能会注意到自己的脖子或身体其他部位出现一些赘生物。这些赘生物可能是良性的&#xff0c;也可能是恶性的&#xff0c;因此了解其可能的原因、进行正确的诊断以及选择合适的治疗方法至关重要。为了解答这个问题&#xff0c;劲松中西医医院皮肤性…

HarmonyOS应用开发Tabs组件的使用

Entry Component struct TabsPage {State currentIndex: number 0;private tabsController: TabsController new TabsController();private controller: TabsController new TabsController()/*** 自定义TabBar* param title* param targetIndex* param selectedImg* param …

element分页

获取数据信息&#xff0c;这是表格和分页内容 <el-col :span"24"><div class"grid-content bg-purple-dark"><el-table :data"tableData" stripe style"width: 100%"><el-table-column prop"xuhao" l…

如何在word文档中批量插入二维码

合同系统中&#xff0c;一般流程是线上拟稿、审批、定稿&#xff0c;然后线下打印定稿的合同并且存档。当拿到一个纸质合同&#xff0c;需要去线上系统查询当时的合同拟制过程&#xff0c;那如何快速定位到这个文档&#xff0c;是一个问题。通用的做法是&#xff0c;将该文档的…

c#中switch常用模式

声明模式 首先检查value的类型&#xff0c;然后根据类型输出相应的消息 public void ShowMessage(object value) {switch (value){case int i: Console.WriteLine($"value is int:{i}"); break;case long l: Console.WriteLine($"value is long:{l}"); b…

做运维,谁能对低风险说不呢?

高效运维&#xff0c;无惧繁琐日常 体验主动式运维下的秒级告警&#xff0c; 轻松应对99%的运维问题&#xff0c; 更低的运维风险成本&#xff0c; AI赋能&#xff0c;新人也能轻松胜任。 零门槛无忧试用&#xff0c;轻松做运维。