chrome 升级后，input事件属性兼容处理。disable后不会click冒泡。

最新推荐文章于 2024-01-15 18:01:28 发布

A_one2010

最新推荐文章于 2024-01-15 18:01:28 发布

阅读量655

点赞数 1

文章标签： chrome 前端 javascript

本文链接：https://blog.csdn.net/A_one2010/article/details/132429257

版权

新版chrome升级到 116.0.5845.97 之后，input标签，click事件，不会进行冒泡，此时，在外层的click监听不到。自身click亦不会触发。

<div @click="touchFn1" >
     <input  @click="touchFn"  v-model.trim="currentValue" :disabled="disable" />
</div>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

A_one2010

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

移动端H5页面关于软键盘的一些踩坑记录

this_ITBoy的博客

08-27

4546

最近一个项目需要做一个留言的功能，需求很简单，点击留言按钮底部弹出留言框，然后发送留言给后台就行了，还有一个就是页面要实现复制功能。讨论需求的时候我预想到了手机上软键盘的弹出可能会有一些bug，不过需求比较急，就想着先做完再来改呗。很快做完之后，在电脑上测了没毛病，提测之后，bug刷刷的就来了： 1、手机ios或者Android微信，点击留言弹出输入框，点击完成或者收起按钮，或者安卓手机点击自带...

jQuery学习笔记

丑小鸭变黑天鹅的博客

03-02

1250

jQuery学习笔记一、初识jQuery1、是什么？2、为什么使用？3、如何使用二、jQuery的使用1、jQuery函数：$ / jQuery2、jQuery函数的使用1、核心函数2、核心对象3、使用jQuery核心函数1、选择器2、基本选择器3、层次选择器4、过滤选择器5、常见效果-表格隔行变色6、表单选择器4、工具方法5、常见效果-多Tab点击切换6、一、初识jQuery 1、是什么？一个JS函数库: write less, do more 封装简化DOM操作(CRUD) / Ajax 2、为什

参与评论您还未登录，请先登录后发表或查看评论

在input加了disabled属性后，如何触发点击事件?

weixin_47020721的博客

03-07

6446

点击子标签，会一层一层往上传，并触发父标签的绑定事件。

input输入框设置了disabled后想触发点击事件

最新发布

qq_47163013的博客

01-15

1238

input输入框设置了disabled禁止输入，然后想通过外层点击事件触发其它内容的弹出，安卓手机在公众号中会不生效，ios和浏览器环境下没有问题。1、把之前的disabled属性更换成了readonly。2、给input增加点击事件清除的样式如下。

disable 禁用元素后无法触发点击事件

zhangzuruiqqq的博客

08-22

2003

原本是不需要加事件穿透即可触发但是最近谷歌更新触发不了加一个事件穿透就好了。在被禁用元素上套一层div div上绑定事件。业务需求点击被禁用的输入框触发事件。

按钮（button）在disabled状态下，无法阻止事件冒泡

yurisa1994的博客

06-30

569

不知道大家遇到过这个问题没，本来button是有点击事件的，做了事件冒泡，但是按钮设为禁用（disabled）的状态时，事件冒泡不起作用了，会触发外层的点击事件，搜索无果。自己创造了解决办法，在按钮外层套一个div，并加一个没有任何操作的事件，完美阻止冒泡。

input中加入disabled之后无法触发click,mouseover,mouseout事件

shangsiqi1的博客

10-28

5132

如果只为 <input type='submit' id="name"> 绑定事件 $("#name").on('mouseover',function(){ $(this).attr('disabled',true) }) $('#name').on('mouseout',function(){ $(this).attr('disabled',false) $(this).r...

谷歌浏览器版本116，点击下拉框没反应

无知者无畏

08-23

2038

浏览器兼容问题

学习「JavaScript高级设计语言」 ‘入门-深入‘ 一篇就够用「坚持学习」+「收藏」

m0_47429092的博客

01-11

853

JavaScript 计算机基础编程语言编程语言编程：就是让计算机为解决某个问题而使用某个程序设计语言编写程序代码，并最终得到结果的过程。计算机程序：就是计算机所执行的一系列的指令集合，而程序全部都是用我们所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出指令。注意：上面所定义的计算机指的是任何能执行代码的设备，可能是智能手机、ATM机、黑莓pl、服务器等等计算机语言计算机语言指用于人与计算机之间通讯的语言，他是人与计算机之间传递信息的媒介。计算机语言的种类非常多，

JS高级程序设计-总结二

我是谁的博客

09-20

245

1.文档信息作为HTML Document的一个实例，document对象还有一些标准的Document对象所没有的属性。 URL属性中包含页面完整的URL（即地址栏中显示的URL），domain属性中只包含页面的域名，而referrer属性中则保存着链接到当前页面的URL。 URL与domain属性时相互关联的。例如，如果document.URL等于http://www.wrox.com/Wi...

漏扫动态爬虫实践

9ian1i

06-12

921

漏扫动态爬虫实践这篇文章在前段时间首发于安全客，从正式工作以来，自己没有坚持住经常更新博客的习惯，大部分积累都保存在了个人的笔记，很少有时间整理发出来，果然懒才是原罪。 0x00 简介动态爬虫作为漏洞扫描的前提，对于web漏洞发现有至关重要的作用，先于攻击者发现脆弱业务的接口将让安全人员占领先机。即使你有再好的payload，如果连入口都发现不了，后续的一切都无法进行。这部分内容是我对之前开发...

解决uni在H5谷歌浏览器下 input 标签设置 disabled 后,click事件不触发

2301_76742166的博客

08-25

3042

解决uni在H5谷歌浏览器下 input 标签设置 disabled 后,click事件不触发

input取消冒泡遇到的问题

weixin_43356259的博客

04-12

1561

input取消冒泡 #取消冒泡在给input添加点击触摸事件后,会有冒泡行为,为了阻止冒泡,我添加了stopPropagation()这个方法,但是还是没有阻止冒泡 var input = document.querySelector(‘input’); input.addEventListener(‘touchend’, function (e) { e.stopPropagation(); }); 对input进行点击并右滑触发了其他冒泡行为触发了冒泡,父元素的移动行为使页面移动. 之所以触发冒

当 el-input 组件处于禁用状态时，其 click 事件依然会被触发

to_the_Future的博客

04-07

3304

当 el-input 组件处于禁用状态时，其 click 事件依然会被触发

热门推荐

weixin_43807047的博客

08-21

1万+

input元素禁用了之后，点击事件是不会触发，禁用状态下也能触发点击事件或其他事件的办法

菜鸡的博客

09-14

3686

你可以使用CSS来模拟禁用状态的外观，而不实际禁用输入元素。这样，元素看起来像是禁用的，但仍然可以触发事件。你可以在禁用的输入元素上添加一个透明的覆盖层，以阻止用户点击它，但允许点击覆盖层上的内容。属性）时，该元素不会触发任何点击事件或其他交互事件。这是HTML规范的一部分，用于表示该输入元素处于不可交互状态，用户不能与其进行交互或触发任何事件。请根据你的需求选择适当的方法，以实现在禁用状态下触发事件。前两种方法需要一些自定义的样式和事件处理，但可以满足特定的交互需求。在HTML中，当一个。

排查disabled问题之谷歌新版本特性

qq_44859233的博客

09-14

670

最近我突然接手一个后台的bug，这个后台很久没有迭代更新了，我也不熟悉业务，所以只能看一下源码，问题很快就复现，测试的修复操作也很正确，就是因为渲染的input标签中存在disabled='disabled’属性导致的。但是测试和运营那边的人员都坚持，两个月前还是正常的，记录能够证明，我先怀疑的是，两个月前是正常的，那是不是两个月前有迭代，谁更新了什么依赖的版本导致出现的bug，然后就开始找仓库最后一次修改记录。这是一个子组合，父组件传递的属性确实是false，而且不传递这个属性时，默认值也是false。

chrome下input:file无法触发click事件的问题

teresa502的专栏

01-14

9052

在chrome浏览器下，为了数据安全，隐藏的input：file不能trigger “click” 事件。所以要设置input：file的透明度达到隐藏的效果。

js控制input的disable属性

03-16

可以使用JavaScript来控制input元素的disable属性。具体方法如下： 1. 获取input元素的引用，可以使用document.getElementById()或document.querySelector()等方法。 2. 使用元素的disabled属性来设置或取消禁用状态，例如： // 获取input元素的引用 var inputElement = document.getElementById('myInput'); // 禁用input元素 inputElement.disabled = true; // 取消禁用input元素 inputElement.disabled = false; 注意：disabled属性的值为布尔类型，true表示禁用，false表示不禁用。