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

news2024/11/17 9:51:13

【问题描述】
谷歌浏览器更新后,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.coloradmin.cn/o/1181048.html

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

相关文章

python随机生成指定长度的字符串

需求&#xff1a;随机生成一个指定长度的字符串&#xff08;数字和小写字母&#xff09; 涉及到的python知识点 &#xff08;1&#xff09;python模块包&#xff1a;random random.choice(sequence)&#xff1a;从指定的序列中获取一个随机元素 random.choice(sequence)从序…

GoLong的学习之路(二十一)进阶,语法之并发(go最重要的特点)(协程的主要用法)

并发编程在当前软件领域是一个非常重要的概念&#xff0c;随着CPU等硬件的发展&#xff0c;我们无一例外的想让我们的程序运行的快一点、再快一点。Go语言在语言层面天生支持并发&#xff0c;充分利用现代CPU的多核优势&#xff0c;这也是Go语言能够大范围流行的一个很重要的原…

AI 视频 | 文本生视频工具又迎来重大更新,Runway Gen-2 到底有多强?Gen-2 怎么用(保姆级教程)

一、引言 不久前刚介绍了一个号称地表最强的文本生视频的工具 Moonvalley&#xff1a;免费的 AI 视频生成工具 Moonvalley 厉害了&#xff01;Moonvalley 怎么用&#xff08;保姆级教程&#xff09; 紧接着在 11 月 2 日&#xff0c;Runway 重磅发布了第 2 代文本到视频和图像…

unity打AB包,AssetBundle预制体与图集(三)

警告&#xff1a; spriteatlasmanager.atlasrequested wasn’t listened to while 条件一&#xff1a;图片打图集里面去了 条件二&#xff1a;然后图集打成AB包了 条件三&#xff1a;UI预制体也打到AB包里面去了 步骤一&#xff1a;先加载了图集 步骤二&#xff1a;再加载UI预…

测试面试题集锦(四)| Linux 与 Python 编程篇(附答案)

本系列文章总结归纳了一些软件测试工程师常见的面试题&#xff0c;主要来源于个人面试遇到的、网络搜集&#xff08;完善&#xff09;、工作日常讨论等&#xff0c;分为以下十个部分&#xff0c;供大家参考。如有错误的地方&#xff0c;欢迎指正。有更多的面试题或面试中遇到的…

四川思维跳动商务信息咨询有限公司可靠吗?

随着抖音等短视频平台的兴起&#xff0c;越来越多的商家开始利用这些平台进行带货。四川思维跳动商务信息咨询有限公司也提供抖音带货服务&#xff0c;那么&#xff0c;他们的服务可靠吗&#xff1f;本文将为你揭开真相&#xff0c;让你安心选择&#xff01; 一、公司简介 四川…

分布式任务调度(04)--自研

1 背景 兼容技术团队自研的RPC框架&#xff0c;技术团队不需要修改代码&#xff0c;RPC注解方法可以托管在任务调度系统中&#xff0c;直接当做一个任务来执行。 研读XXL-JOB&#xff0c;同时从阿里云分布式任务调度 SchedulerX 吸取。 SchedulerX 1.0 架构图 Schedulerx-co…

MCU常见通信总线串讲(二)—— RS232和RS485

&#x1f64c;秋名山码民的主页 &#x1f602;oi退役选手&#xff0c;Java、大数据、单片机、IoT均有所涉猎&#xff0c;热爱技术&#xff0c;技术无罪 &#x1f389;欢迎关注&#x1f50e;点赞&#x1f44d;收藏⭐️留言&#x1f4dd; 获取源码&#xff0c;添加WX 目录 前言一…

Word文档中书签使用注意事项

在协同编辑文档时&#xff0c;书签被广泛应用在各种场景中&#xff0c;当我们在编辑时有时候会搞不懂我们的哪些操作会导致书签更换段落或是删除&#xff0c;比如同样的某些操作在修订场景下书签就不会消失&#xff0c;但非修订状态就会消失。在这篇文章中我们就介绍一下我们的…

数据中心的防雷接地

在数据中心建设中&#xff0c;防雷接地是非常重要的一项工作&#xff0c;能有效地保护数据中心设备和系统免受雷击的影响。下面是一些关于数据中心防雷接地的常见做法&#xff1a; 接地系统设计&#xff1a;在数据中心的设计阶段&#xff0c;应考虑到接地系统的布置和规划。为了…

Halcon如何使用SaperaLT库连接dalsa相机

halcon安装好的时候&#xff0c;没有带SaperaLT的采集库&#xff0c;需要额外在Halcon官网下载此库。 以下是halcon官网下载此库的链接。官网需要注册才可以下载。 https://www.mvtec.com/downloads/interfaces?tx_mvtecproduct_extensiondownloadlist%5Bfilter%5D%5B0%5Dma…

时空智友企业信息管理系统任意文件读取漏洞复现

简介 时空智友企业信息管理系统是一个用于企业流程管理和控制的软件系统。它旨在帮助企业实现流程的规范化、自动化和优化&#xff0c;从而提高工作效率、降低成本并提升管理水平。 时空智友企业信息管理系统存在任意文件读取漏洞&#xff0c;攻击者可以在未授权的情况下读取…

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

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

yolov5 学习体验

模型训练&#xff1a; train.py def parse_opt(knownFalse):parser argparse.ArgumentParser()parser.add_argument(--weights, typestr, defaultROOT / yolov5s.pt, helpinitial weights path)parser.add_argument(--cfg, typestr, default, helpmodel.yaml path)parser.ad…

FL Studio21中文升级版全能的音乐制作软件

对于唱作人来说&#xff0c;一款优秀、全能的音乐制作软件&#xff0c;能帮助他们在创作上获得更多的灵感、以及为歌曲带来更多的变化。 FL Cloud 音效库包含开放版权的Loop和采样&#xff0c;以及来自 FL Studio 著名用户的艺术家独家内容。更新后&#xff0c;现在还可以使用…

必看!玩转Salesforce沙盒的5个实用技巧

定期刷新沙盒对于尝试最新版本的功能&#xff0c;以及防止在生产组织的环境中缺乏测试而导致开发工作回滚至关重要。 为了确保沙盒设置在刷新后顺利进行&#xff0c;需要考虑几个因素。首先&#xff0c;确保有完善的文档化流程。文档应分为Conga、DocuSign、数据&#xff08;C…

基于ubuntu1604的ROS安装

不同版本的Ubuntu都有对应的ROS版本&#xff0c;不要强行安装不对应的版本&#xff0c;否则遇到问题会很难找到解决方法。此教程也只是基于Ubuntu1604和kinetic版本的ROS。 一、基本流程 以下命令仅记录执行顺序&#xff0c;不要无脑复制执行&#xff0c;重在理解 #基本更新…

JavaScript 进阶问题列表,巩固自己的知识。

不定时更新 JavaScript 进阶问题列表 从基础到进阶&#xff0c;测试你有多了解 JavaScript&#xff0c;刷新你的知识&#xff0c;或者帮助你的 coding 面试&#xff01; &#x1f4aa; &#x1f680; 答案❤️ 1. 输出是什么&#xff1f; function sayHi() {console.log(na…

【Git】Git 学习笔记_操作本地仓库

1. 安装与初始化配置 1.1 安装 下载地址 在文件夹里右键点击 git bash here 即可打开命令行面板。 git -v // 查看版本1.2 配置 git config --global user.name "heo" git config --global user.email xxxgmail.com git config --global credential.helper stor…

关于Alibaba Cloud Toolkit 下载配置以及后端自动部署

idea中File-Settings-Plugins 搜索Alibaba Cloud Toolkit点击下载&#xff0c;下载完成重启 1、点击 Tools-Alibaba Cloud-Deploy to Host 部署到主机 2、配置服务器ip、jar包启动命令、服务器jar存放位置 3、设置服务器ip用户名密码&#xff0c;点击测试连接情况 4、配置脚本…