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

【问题描述】
谷歌浏览器更新后,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://www.mzph.cn/news/135497.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【python海洋专题四十】海洋指数画法--单色填充图

【python海洋专题四十】海洋指数画法–单色填充图 【python海洋专题四十】海洋指数画法–单色填充图 数据:AMO_index 图像展示: 图片 往期推荐 图片 【python海洋专题一】查看数据nc文件的属性并输出属性到txt文件 【python海洋专题二】读取水深nc文件并水深地形图 【p…

[PHP]得推跑腿O2O系统 v3.41

得推跑腿系统是一个以phpMySQL进行开发的主要针对本地跑腿服务的O2O系统&#xff0c;支持wap\\小程序\\App。 主要功能模块&#xff1a; 用户端&#xff1a; 1.跑腿任务发布 2.跑腿任务管理追踪 3.在线支付 4.常用地址管理 跑腿端&#xff1a; 1.跑腿任务抢单 2.跑腿员认证 3.…

2023年Q3乳品行业数据分析(乳品市场未来发展趋势)

随着人们生活水平的不断提高以及对健康生活的追求不断增强&#xff0c;牛奶作为优质蛋白和钙的补充品&#xff0c;市场需求逐年增加。 今年Q3&#xff0c;牛奶乳品市场仍呈增长趋势。根据鲸参谋电商数据分析平台的相关数据显示&#xff0c;2023年7月-9月&#xff0c;牛奶乳品市…

【星海随笔】git的使用

1.在终端&#xff0c;检查git是否安装 git --version 2.没有安装的话去&#xff0c;官网&#xff0c;下载git 3.一直点下一步即可 4.安装后在终端检查git是否安装好 5.设置用户名和邮件地址(最好和GitHub的用户名/邮箱保持一致) git config --global user.name “自己的用户名”…

数据结构: 哈希桶

目录 1.概念 2.模拟实现 2.1框架 2.2哈希桶结构 2.3相关功能 Modify --Insert --Erase --Find 2.4非整型数据入哈希桶 1.仿函数 2.BKDR哈希 1.概念 具有相同地址的key值归于同一集合中,这个集合称为一个桶,各个桶的元素通过单链表链接 2.模拟实现 2.1框架 a.写出…

2.3.3 交换机的RSTP技术

实验2.3.3 交换机的RSTP技术 一、任务描述二、任务分析三、具体要求四、实验拓扑五、任务实施1.交换机的基本配置。2.开启交换机的STP。3.配置SW3A和SW3B上STP的优先级。将SW3A配置为根交换机&#xff0c;SW3B配置为备用根交换机。4.配置SW2A和SW2B的边缘接口 六、任务验收七、…

使用基于swagger的knife4j自动生成接口文档

添加swagger依赖springfox&#xff0c;添加knife4j依赖 <dependency><groupId>io.springfox</groupId><artifactId>springfox-boot-starter</artifactId> </dependency> <dependency><groupId>com.github.xiaoymin</group…

C语言:union类型

C语言的union类型是一种用于存储不同数据类型的数据结构&#xff0c;但与struct类型不同&#xff0c;union只能同时存储其中的一个成员的值&#xff0c;而不是所有成员的值。这可以节省内存&#xff0c;因为union的大小等于其最大成员的大小。 union UnionName {data_type mem…

postman中文乱码

在header中添加这两个&#xff1a; Content-Type application/json;charsetUTF-8 Accept application/json;charsetUTF-8

Mac下flutter工程配置Gitlab cicd打包(暂时仅限android侧)

写的太粗糙&#xff0c;可能不太适合完全不懂的同学&#xff0c;但是实在没时间&#xff0c;而且也不太会写&#xff0c;权当做一个记录吧&#xff0c;对了还没有搞docker这些&#xff0c;还在持续学习中 1.GitLab Runner&#xff08;打包机&#xff09; 注意:需要有对应的权…

docker容器安装gdb

1)将设备连到大网&#xff08;大网转接小网&#xff09; 交换机上&#xff1a; 1.查看现在的网关&#xff1a;ip route show 已有网关现象&#xff1a; default via 192.168.2.2 dev eth0 //默认网关 192.168.2.0/24 dev eth0 proto kernel scope link src 192.168.2.33 240.1…

MySQL基础操作

注:mysql是大小写不敏感的. 1.数据库基础操作(展示) //1.展示当前数据库 show databases;//2.创建数据库 create database 数据库名;//3.使用数据库 use 数据库名;//4.删除数据库 drop database 数据库名;2.SQL中基本类型 2.1 数值类型(整数和浮点型) 注:decimal和numeric…

asp.net生产线远程故障诊断系统VS开发sqlserver数据库web结构c#编程Microsoft Visual Studio

一、源码特点 asp.net 生产线远程故障诊断系统是一套完善的web设计管理系统&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为vs2010&#xff0c;数据库为sqlserver2008&#xff0c;使用 c#语言开发 asp.net生产线远程故障诊断…

搭建自己的MQTT服务器,实现设备上云(Ubuntu+EMQX)

一、EMQX介绍 这篇文章教大家在ECS云服务器上部署EMQX,搭建自己私有的MQTT服务器,配置EMQX实现设备上云,设备数据转发,存储;服务器我采用的华为云的ECS服务器,系统选择Ubuntu系统。 Windows版本的看这里: https://blog.csdn.net/xiaolong1126626497/article/details/1…

js上传下载函数封装

上传函数封装 const addSubmit (val) > {if (val.length < 1) {messageTitle(上传文件不能为空, warning) // messageTitle是我封装的elmentui的message组件&#xff0c;可根据自己的代码调整} else {const formData new FormData()formData.append(multipartFile, val…

伐木猪小游戏

欢迎来到程序小院 伐木猪 玩法&#xff1a;控制小猪点击屏幕左右砍树&#xff0c;不能碰到树枝&#xff0c;考验手速与眼力&#xff0c;记录分数&#xff0c;快去挑战伐木吧^^。开始游戏https://www.ormcc.com/play/gameStart/199 html <script type"text/javascript…

Map(关联数组)和Set(集合)

目录 Map和Set是用来专门查找的数据结构,查找效率非常高 Map是key-value模型(对应了两个东西) Set是纯key模型(只对应i一个东西) Map的使用 Map的方法 Map的put()方法 Map的get()方法 Map的getOrdefault()方法 Map的keySet()方法 Map的entrySet()方法 Entry是Map的内部接口类​…

TensorFlow(1):深度学习的介绍

1 深度学习与机器学习的区别 学习目标&#xff1a;知道深度学习与机器学习的区别 区别&#xff1a;深度学习没有特征提取 1.1 特征提取方面 机器学习的特征工程步骤是要靠手动完成的&#xff0c;而且需要大量领域专业知识深度学习通常由多个层组成&#xff0c;它们通常将更简…

【数据结构】线性表的链式存储结构

&#x1f984;个人主页:修修修也 &#x1f38f;所属专栏:数据结构 ⚙️操作环境:Visual Studio 2022 顺序存储结构的不足的解决办法 从上一节我们对顺序表的讨论中可见,线性表的顺序存储结构的特点是: 逻辑关系上相邻的两个元素在物理位置(内存)上也相邻,因此可以随机存取表中…

持续交付-Jenkinsfile 语法

实现 Pipeline 功能的脚本语言叫做 Jenkinsfile&#xff0c;由 Groovy 语言实现。Jenkinsfile 一般是放在项目根目录&#xff0c;随项目一起受源代码管理软件控制&#xff0c;无需像创建"自由风格"项目一样&#xff0c;每次可能需要拷贝很多设置到新项目&#xff0c;…