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

这篇具有很好参考价值的文章主要介绍了在input加了disabled属性后,如何触发点击事件?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

input标签 disabled属性说明

  • 被禁用的input标签 既不可用,也不可进行点击

解决方案

  • 使用readonly属性 来替换disabled属性
  • 外套一层父标签,给父标签添加点击事件,并设置input的样式为"pointer-events:none" 去掉鼠标事件,然后通过冒泡触发到父标签上的点击事件。

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

取消冒泡事件文章来源地址https://www.toymoban.com/news/detail-685674.html

e.stopPropagation();
var div2 = document.getElementById("div2");
var div1 = document.getElementById("div1");

 div2.onclick = function(ev){  // 红色面板加事件
     div1.style.display = "block";     stopBubble(ev);//这样就不会再冒泡给父级了 }; document.onclick = function(){      div1.style.display = "none"; } 
function stopBubble(e) {
    //如果提供了事件对象,则这是一个非IE浏览器
   if ( e && e.stopPropagation )
      //因此它支持W3C的stopPropagation()方法
      e.stopPropagation();
  else
  //否则,我们需要使用IE的方式来取消事件冒泡
    window.event.cancelBubble = true;
}

到了这里,关于在input加了disabled属性后,如何触发点击事件?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • vue页面内更改状态,渲染视图(设置input的disabled属性)

    Vue不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性遍历执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。

    2024年02月16日
    浏览(48)
  • js触发点击事件(模拟自动点击事件)

    进入页面触发点击事件 js 派发事件 Event.initEvent()已弃用 添加链接描述

    2024年02月16日
    浏览(53)
  • vue子元素点击事件与父元素点击事件冲突 子元素点击事件不触发

    在vue项目中,子元素有点击事件,父元素也有点击事件,当点击子元素时往往触发的是父元素的点击事件,产生冲突,怎样解决这个问题呢? 解决方法:使用vue中的事件修饰符 vue为 v-on 提供了 .stop、.prevent、.self、.once等事件修饰符,当遇到子元素与父元素的事件冲突,就要

    2024年02月14日
    浏览(37)
  • js 模拟回车 模拟键盘,给input框输入值 触发回车事件

    使用js模拟按键输入的踩坑记录 https://zhuanlan.zhihu.com/p/356661173 a) b) c) 仅模拟回车事件 https://juejin.im/post/6844904128305430541 键盘键值对照表: https://blog.csdn.net/geekswg/article/details/120246209 原文参考: http://wjhsh.net/robinunix-p-13685771.html https://www.cnblogs.com/robinunix/p/13685771.html 浏览器兼容:

    2024年02月11日
    浏览(60)
  • Unity射线以及相关点击触发事件的归纳

    例如:最近在做一些Unity的小游戏需要,需要用到射线检测和点击事件等操作,虽然都是一些很基础的东西但是也折腾了一会,主要有些细节没处理好就会导致不触发,写篇博客学习记录一下吧。   这个是最常用的,常用于3D游戏中通过射线检测来获取鼠标点击的位置来控

    2024年02月01日
    浏览(42)
  • 关于使用Echarts来设置地图并触发点击事件

    先上效果图 有坑需要小伙伴们避开,Echarts版本号超过4.9就不能使用地图软件了,所以需要先卸载高版本再安装 配置好后复制就可以看到效果。

    2024年02月11日
    浏览(39)
  • elementui表格中实现点击单个单元格触发事件

    关键部分 template scope=\\\"scope\\\"       div class=\\\"sub-body\\\" @click=\\\"rePeoplemessageCard(scope.row.name)\\\"{{ scope.row.name }}/div     /template

    2024年01月22日
    浏览(41)
  • Element UI中防止赋值触发el-slider的input事件

    我封装了一个滑动条组件,重写了一个滑动条 使用el-slider封装组件时,发现初始化赋值时总会触发el-slider的input事件。 猜测有可能是el-slider封装时,v-model导致的(详情) 具体原因不太清楚 目前我试验的效果是,但凡v-model的值发生改变,就会触发input事件 我需要实现这样一

    2024年02月14日
    浏览(45)
  • vant UI 轮播组件swiper 滑动时触发click点击事件

    问题描述:  如图 我是用轮播图做了一个答题卡分页 但是 出现了 滑动轮播图时自动触发了数字点击的事件 解决办法: 1.在van-swipe标签添加 lazy-render属性,实现图片懒加载,懒加载模式下,只会渲染当前页和下一页。 2..在van-swipe标签添加 :stop-propagation=\\\"false\\\" 属性,阻止滑动

    2024年02月07日
    浏览(45)
  • el-table 个体行绑定点击事件时 表格中有el-radio和el-checkbox 点击触发两次事件处理方法

    el-table 个体行绑定点击事件时 表格中有el-radio和el-checkbox 点击触发两次事件处理方法 代码如下(示例):

    2024年02月05日
    浏览(54)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包