vue中 input disable后无法触发点击事件

最新推荐文章于 2024-06-04 09:31:19 发布
最新推荐文章于 2024-06-04 09:31:19 发布
阅读量1.2k 收藏 1
点赞数 4
分类专栏： 异常问题 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gaxing4615/article/details/136353562
版权

问题：input标签为disabled后，点击事项无效；当点击文字**“请选择”**时无法触发点击事件，其父标签的其余位置均可触发
在这里插入图片描述
解决：只需要在input标签中添加 style=“pointer-events:none” 即可
pointer-events: none
作用是让元素实体 “虚化”，去掉鼠标事件
大家都知道 input[type=text|button|radio|checkbox] 支持 disabled 属性，可以实现事件的完全禁用。如果其他标签需要类似的禁用效果，可以试试 pointer-events: none

名字越长技术越强
关注
  • 4
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue重点1：disabled=“false“ 在字符串模板中无效的原因
小黄呀呀呀的博客
09-14 6236
问题: 在字符串模板里对按钮设置属性的时候，想要先测试一下的，实现 的效果，但是发现失效 产生原因: 我上面的东西是写在字符串模板里的，所以布尔值在字符串模板里是字符串型的，所以我们需要将其绑定成一个变量 设置禁用的一个小技巧 ...
input上添加disabled=“true“，点击事件失效处理办法
m0_67624022的博客
05-08 894
给input标签添加样式style="pointer-events: none;
Vue动态控制input的disabled属性的方法
12-29
有时候会有这样的需求，新增的时候可以输入，但是无法修改，此时就需要通过控制input标签的disabled属性来实现，那vue是如何动态设置input输入框的disabled属性的呢？ 输入框的html源代码 新增~ 通过F12查看实际页面渲染代码 修改~ 通过F12查看实际页面渲染代码 主要是通过 v-bind:disabled 绑定 dataForm.id 的值来动态判断是否添加 disable
解决在微信小程序中使用input框的disabled=“true“属性后，在 PC端打开微信小程序时其父元素点击事件无效
最新发布
m0_65284931的博客
06-04 271
在微信小程序中，当一个元素被设置为 disabled 后，它会阻止事件传播到其父级元素。这意味着父级元素上的点击事件也会被禁用，下面为元素结构；
vue 动态控制input输入框的disabled属性
热门推荐
月影神社
09-23 1万+
最近项目上提出一个经常遇到的需求，点击新增时input可输入，点击编辑时input置灰。写下过程，希望能帮助到大家。 1.首先在input上添加disabled属性 2.data中定义isDisabled值为false(可编辑) 3.在新增的点击事件中设置isDisabled=false(可编辑) .编辑的点击事件中设置isDisabled=true(不可编辑). 最后的效果就是文章最开头啦！ ...
Vue 动态控制输入框的disabled属性
7c
08-10 4178
Vue 动态控制输入框的disabled属性
elementui的input的disabled属性导致点击事件失效，可采用readonly属性替换，修改其样式如下
m0_46120422的博客
01-26 1414
关键点在于readonly-input类名映射变量 --el-input-bg-color。
【wepy】设置disabled的值 不生效 解决办法
曹小心的博客
05-20 6138
问题原因 举例说明，以 button 倒计时为例子； 给 button 的 disabled 赋值 this.isDisabled == true; 不生效 代码实例 template <template> <button class="code" @tap="code" disabled="{{isDisabled}}"> {{code...
Vue触发input选取文件点击事件操作
10-14
在Vue.js中，触发input元素的选取文件点击事件是一个常见的需求，这通常涉及到用户界面中的文件上传功能。在本文中，我们将深入探讨如何在Vue组件中实现这一操作，并结合示例代码进行详细解释。 首先，我们需要创建...
Vue v-for中的 input 或 select的值发生改变时触发事件操作
10-14
- `v-on:input` 是Vue中用来监听元素`input`事件的指令，当用户在输入框中输入内容时，`input`事件会被触发。在HTML中，我们可以直接使用`oninput`来绑定一个JavaScript函数，但在Vue中，我们需要将其转换为`v-on:...
vue+elementui实现点击table中的单元格触发事件--弹框
10-15
本示例探讨了如何实现在Vue+Element UI中，当用户点击表格内的单元格时触发特定事件，并弹出一个对话框。Element UI提供了一个强大的表格组件（`el-table`），它允许开发者自定义列模板，从而实现丰富的功能。 首先...
VUE解决 v-html不能触发点击事件的问题
10-16
在Vue.js开发过程中，有时候会遇到一个问题，即使用`v-html`指令插入动态HTML内容时，这些内容中的事件监听器（如点击事件）无法正常触发。这是因为Vue.js的模板编译机制不处理`v-html`插入的纯HTML字符串，它们被视...
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
10-14
在开发Vue应用时，我们可能会遇到使用第三方滚动库如Vue-scroller时，遇到的一个常见问题：在页面中包含`<input>`输入框时，用户在输入框区域内无法触发滚动操作。这个问题主要是由于Vue-scroller组件内部的源码逻辑...
vue页面内更改状态，渲染视图（设置input的disabled属性）
Xiang_Gong_Ya_的博客
07-11 565
Vue不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性遍历执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。
解决uni在H5谷歌浏览器下 input 标签 设置 disabled 后,click事件不触发
2301_76742166的博客
08-25 2935
解决uni在H5谷歌浏览器下 input 标签 设置 disabled 后,click事件不触发
input中加入disabled之后无法触发click,mouseover,mouseout事件
shangsiqi1的博客
10-28 5079
如果只为 <input type='submit' id="name"> 绑定事件 $("#name").on('mouseover',function(){ $(this).attr('disabled',true) }) $('#name').on('mouseout',function(){ $(this).attr('disabled',false) $(this).r...
Vue2_不同状态下禁用input框
Rainbow_bead的博客
10-30 1667
vue 不同状态下禁用input框
当 el-input 组件处于禁用状态时，其 click 事件依然会被触发
to_the_Future的博客
04-07 3118
当 el-input 组件处于禁用状态时，其 click 事件依然会被触发
【vue elementui中el-input输入框禁用】
qq_45278500的博客
12-09 1万+
el-input标签禁用
err-disable state
06-13
"err-disable state" 是指网络设备（如交换机、路由器等）中的一个状态，当某个端口出现故障或错误时，设备会将该端口切换到 err-disable 状态，以保护网络的稳定性和安全性。在 err-disable 状态下，该端口将被禁用，需要手动将其恢复到正常状态。常见的引起 err-disable 状态的事件有：端口过载、链路错误、STP（生成树协议）错误等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值