【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.mfbz.cn/a/121409.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Android学习笔记(五)

Web连接服务器 连接web服务器两种方式 一 重写URL地址(get post) package com.example.gdget; public class MainActivity extends Activity { private Button downImage; private ImageView showImage; private static String URL_PATH"http://192.168.1.…

Tkinter创建菜单窗口

一、说明 本文专门记录如何添加Tkinter的菜单&#xff0c;包括&#xff0c;菜单如何生成&#xff0c;菜单如何布局&#xff0c;菜单如何绑定回调函数&#xff0c;并安排代码示例&#xff0c;凡期望做菜单界面的读者&#xff0c;可以全面参考。 二、创建菜单实现步骤 2.1 总体…

基于SSM的旅游管理系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

Java类加载机制

类加载机制 将class文件中的二进制数据读取到内存中&#xff0c;并对其进行校验&#xff0c;解析和初始化&#xff0c;将类型数据存放在方法区&#xff0c;实例对象存放在堆&#xff0c;作为方法区该类的数据访问接口。这就是类加载。 加载 通过全限定名获取二进制字节流将…

Centos7安装宝塔面板8.0.3并实现公网远程登录宝塔面板【内网穿透】

Centos7安装宝塔面板8.0.3并实现公网远程登录宝塔面板【内网穿透】 文章目录 Centos7安装宝塔面板8.0.3并实现公网远程登录宝塔面板【内网穿透】一、使用官网一键安装命令安装宝塔二、简单配置宝塔&#xff0c;内网穿透三、使用固定公网地址访问宝塔 宝塔面板作为建站运维工具&…

等保评测是什么意思

等保评测是一种信息安全评估标准&#xff0c;是国家信息安全管理机构为确保信息安全而对信息系统的安全性能进行定期评估的行为。它主要用于评估网络安全的实现情况&#xff0c;包括组织和技术。 等保评测具有系统性和综合性&#xff0c;能够及时发现网络安全风险&#xff0c;…

【 Docker: 数据卷挂载】

背景 Docker只提供了容器运行的必备依赖&#xff0c;但是一些编辑等操作的依赖是不支持的&#xff0c;如vi操作容器内部文件、将静态资源拷贝到容器内来等。 docker pull nginx docker run -d -p 81:80 --namemynginx -v D:/docker/nginx/www:/usr/share/nginx/www -v D:/dock…

【技术驿站】分布式基础与常见面试问题

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

Vue多级路由的实现

对Vue路由的配置不了解的看这篇文章&#xff1a;Vue-router 路由的基本使用-CSDN博客 一、配置children属性 注意&#xff1a;子路径不能带 / { path : "/父路径", component : 父组件, children : [{ path : "子路径", component : 子组件 }] } 二、配…

Android中 Applicaton Context,Service context, Activity context 的区别。

Context类图 类间关系&#xff1a;https://weichao.blog.csdn.net/article/details/129969122 Context是一个抽象类&#xff0c;定义了接口&#xff0c;它的实现类是ContextImpl类。 ContextWrapper是Context的派生类&#xff0c;它实现了Context类的接口。但是ContextWrappe…

2023 electron最新最简版windows、mac打包、自动升级详解

这里我将讲解一下从0搭建一个electron最简版架子&#xff0c;以及如何实现打包自动化更新 之前我有写过两篇文章关于electron框架概述以及 常用api的使用&#xff0c;感兴趣的同学可以看看 Electron桌面应用开发 Electron桌面应用开发2 搭建electron 官方文档&#xff1a;ht…

Window下安装 Mongodb,并实现单点事务

在window操作系统下安装Mongodb&#xff0c;并让单点mongodb支持事务&#xff0c;mongodb5以上时才支持事务&#xff0c;所以必须时mongodb5及以上版本才支持。 1、下载mongodb安装文件 &#xff08;1&#xff09; 下载mongodb msi 安装文件 地址&#xff1a;mongocommunity &…

给简历镀金的超级大赛来了 学计算机的学生快冲

近日&#xff0c;由全国高等院校计算机基础教育研究会主办&#xff0c;传智教育院校邦承办的第六届“传智杯”全国IT技能大赛已正式发布。 截至目前&#xff0c;第六届“传智杯”全国大学生IT技能大赛报名人数已达 10741 人&#xff0c;覆盖全国 901 所高校&#xff0c;目前各大…

CS5523/CS5518/MIPI接口转接芯片方案/替代IT6151

CS5523MIPI转EDP信号转换芯片,可替代停产芯片IT6151, CS5518 MIPI转单/双通道 LVDS转接芯片方案。 CS5523芯片应用参考电路&#xff1a; CS5518芯片应用参考电路&#xff1a; CS5518特点&#xff1a; 内置晶振&#xff0c;无需外部晶体 可选外部时钟输入20-154MHz 支持SSC…

科技云报道:数智化升级,如何跨越数字世界与实体产业的鸿沟?

科技云报道原创。 数智化是当下商业环境下最大的确定性。 2022年&#xff0c;中国数字经济规模达50.2万亿元&#xff0c;占国内生产总值比重提升至41.5%&#xff0c;数字经济成为推动经济发展的重要引擎。从小型创业公司到跨国巨头&#xff0c;数字化转型在企业发展历程中彰显…

VSCode安装配置使用教程(最新版超详细保姆级含插件)一文就够了

前言 Visual Studio Code 是一个轻量级功能强大的源代码编辑器&#xff0c;支持语法高亮、代码自动补全&#xff08;又称 IntelliSense&#xff09;、代码重构、查看定义功能&#xff0c;并且内置了命令行工具和 Git 版本控制系统。适用于 Windows、macOS 和 Linux。它内置了对…

安卓 车轮视图 WheelView kotlin

安卓 车轮视图 WheelView kotlin 前言一、代码解析1.初始化2.初始化数据3.onMeasure4.onDraw5.onTouchEvent6.其他 6.ItemObject二、完整代码总结 前言 有个需求涉及到类似这个视图&#xff0c;于是在网上找了个轮子&#xff0c;自己改吧改吧用&#xff0c;拿来主义当然后&…

flink1.18.0 sql-client报错

报错 Flink SQL> select * from t1; [ERROR] Could not execute SQL statement. Reason: org.apache.flink.table.api.ValidationException: Could not find any factory for identifier kafka that implements org.apache.flink.table.factories.DynamicTableFactory in t…

STM32_project:led_beep

代码&#xff1a; 主要部分&#xff1a; #include "stm32f10x.h" // Device header #include "delay.h"// 给蜂鸣器IO口输出低电平&#xff0c;响&#xff0c;高&#xff0c;不向。 //int main (void) //{ // // 开启时钟 // RC…

如何在Linux上搭建本地Docker Registry并实现远程连接

Linux 本地 Docker Registry本地镜像仓库远程连接 文章目录 Linux 本地 Docker Registry本地镜像仓库远程连接1. 部署Docker Registry2. 本地测试推送镜像3. Linux 安装cpolar4. 配置Docker Registry公网访问地址5. 公网远程推送Docker Registry6. 固定Docker Registry公网地址…