前端 解决input框被禁用后无法添加点击事件的bug 简单易懂,快来围观

这篇具有很好参考价值的文章主要介绍了前端 解决input框被禁用后无法添加点击事件的bug 简单易懂,快来围观。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在开发中,我们经常会遇到需要禁用input框的情况,但是禁用后无法添加点击事件的问题。这个问题可能会让你感到十分困扰,但是不用担心,本文将会为您介绍一种解决这个问题的方法。

解决方法很简单,只需要在input框的父节点view中添加 style="pointer-events:none" 即可。具体实现如下:

<view class="nameBox" @click="selectPeo">
  <input type="text" disabled style="pointer-events:none" v-model="gengzu" placeholder="请选择线索填报人" placeholder-class="fontColor" />
</view>

这样做的原理是,将view的点击事件覆盖在了input框上,使得input框不再响应点击事件,但是view仍然可以响应点击事件,从而达到了我们想要的效果。

需要注意的是,这个方法只适用于禁用input框的情况,如果input框没有被禁用,使用这个方法可能会导致input框无法响应输入事件。

最后,希望本篇文章能够帮助到您解决这个问题。如果您还有其他疑问或者建议,欢迎在评论区留言。

感谢您的阅读,期待大佬的三连支持,蟹蟹!。

作者 Emo_TT  

文章来源地址https://www.toymoban.com/news/detail-687445.html

到了这里,关于前端 解决input框被禁用后无法添加点击事件的bug 简单易懂,快来围观的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

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

    input标签 disabled属性说明 被禁用的input标签 既不可用,也不可进行点击 解决方案 使用readonly属性 来替换disabled属性 外套一层父标签,给父标签添加点击事件,并设置input的样式为\\\"pointer-events:none\\\" 去掉鼠标事件,然后通过冒泡触发到父标签上的点击事件。 冒泡事件 点击子标签

    2024年02月10日
    浏览(31)
  • Ubuntu添加PPA(Personal Package Archive)源时遇见N: 无法安全地用该源进行更新,所以默认禁用该源解决方法

    这个错误是因为你的系统无法确认你添加的 PPA 的安全性。默认情况下,系统会禁用尚未经过验证的源。要解决这个问题,通常有两种方法。 一种方法是找一个已经被 Ubuntu 系统认可的 PPA。这是最安全的方法,但并不是所有的 PPA 都有被认可的版本。 另一种方法是强制系统接

    2024年02月04日
    浏览(23)
  • 微信小程序web-view上覆盖原生组件,解决cover-view点击事件无法触发问题

    结合了以下文章,都没有找到办法 https://blog.csdn.net/WEIGUO19951107/article/details/94305964 https://blog.csdn.net/weixin_39461487/article/details/80075140 https://developers.weixin.qq.com/community/develop/doc/cbd33199b42aec724e54419ebe6371d7 图片显示是这个文章给我了参考,并且成功 https://blog.csdn.net/one_girl/article/deta

    2024年02月11日
    浏览(41)
  • 如何给 el-input 添加键盘回车事件

    查找 Element UI 的 input输入框组件(el-input组件),都没有发现可以给输入框添加的回车键监听事件,因为Element UI对其做了进一步封装,想要直接添加 @keydown(或者@keyup.enter)是无效的。 要想在el-input中实现回车键监听事件,需要在@keyup.enter后面加上.native,即 那么 .native 是如

    2024年02月16日
    浏览(37)
  • echarts的tooltip添加点击事件

    效果如下  代码如下  代码如下

    2024年02月16日
    浏览(21)
  • echarts实现渐变折线图并添加点击事件

         折线图点击事件代码:  完整代码如下:

    2024年02月16日
    浏览(45)
  • element ui table某个单元格添加点击事件

    1.创建表格 el-table ref=\\\"multipleTable\\\" :data=\\\"tableData\\\" border el-table-column fixed type=\\\"selection\\\" align=\\\"center\\\"/el-table-column div v-for=\\\"(item,index) in columns\\\" :key=\\\"index\\\" el-table-column :prop=\\\"item.prop\\\" :label=\\\"item.label\\\" :formatter=\\\"item.formatter\\\" align=\\\"center\\\" show-overflow-tooltip /el-table-column /div /el-table 2.创建表头+事件 

    2024年02月17日
    浏览(31)
  • Unity3D-场景中3D物体添加点击事件

    Unity3D - 场景中3D物体添加鼠标点击事件 鼠标点击3D物体触发,Unity从本质上来说有两种:一种是通过事件(event)触发,一种是通过射线(ray)判断穿过的物体触发。这两种触发的原理是不同的,不论哪种触发都必须满足触发的要求才可以,既然原理不同,触发的要求也不一样

    2024年02月08日
    浏览(35)
  • 【JS】动态添加的元素绑定点击事件在移动端不生效

    问题:使用js动态添加的元素,给该元素绑定了点击事件,在PC端一切正常触发,但是在移动端却无法触发方法。 原因:在移动端,绑定点击事件需要注意使用 touch 事件,而不是鼠标的 click 事件。 常用的触摸事件有:- touchstart:手指触摸屏幕时触发 - touchmove:手指滑动屏幕时连续触

    2024年02月15日
    浏览(28)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包