关于前端按钮点击之后禁用的方法总结

方法1.设置属性disabled

已获取dom的情况，举例如下

// 获取上传DOM。
const submit = document.getElementById("submit"); // 按钮id值
...
submit.setAttribute("disabled", "true");  //禁用
submit.removeAttribute("disabled");  // 解除禁用

未获取dom，直接$(“#按钮id”)的情况：

$("#resume").attr("disabled", true);
// 或
$("#resume").attr("disabled", "true");
// 或
$("#resume").attr("disabled", "disabled");
——解除禁用——
$("#resume").attr("disabled", false);
// 或
$("#resume").attr("disabled", "");

方法2. 移除监听事件

假设获取dom后使用了监听事件——>addEventListener:

原理：将函数或实现 EventListener 的对象添加到调用它的 Event 目标上指定事件类型的事件侦听器列表中。如果函数或对象已位于此目标的事件侦听器列表中，则不会再次添加该函数或对象

submit.addEventListener("click", fn)
function fn() {console.log(222);submit.removeEventListener('click', fn)// 因为移除监听事件和绑定的参数是一样的，所以这里也只能是一个回调函数，函数不打()是因为点击才执行
}

引用自：这里

或者：

var handler = function() {alert('hhh');
}
btn.addEventListener('click', handler, false);
btn.removeEventListener('click', handler, false); // 移除有效

关于前端按钮点击之后禁用的方法总结相关推荐

Photoshop 2020 新建闪烁以及创建按钮点击无反应解决方法
小伙伴们安装了Adobe Photoshop 2020后经常会问我新建画布闪烁以及创建按钮无法点击应该怎么解决,今天小编就教大家设置一下. 方法一,首先打开ps,如图所示: 勾选使用旧版" ...
js按钮点击事件，调用方法
<html><head><title>usually function</title></head><script> funct ...
循环出按钮点击按钮显示按钮上面文字 vue el-button_前端学习计划之VUE学习（一）...
Vue 是什么 Vue是一套用于构建用户界面的渐进式框架. Vue被设计为可以自底向上逐层应用. Vue的核心库只关注视图层,易上手,便于和第三方库或既有项目整合. 现代化的工具链和各种类库结合使用, ...
layui隐藏侧边栏_layui禁用侧边导航栏点击事件的处理方法
layui是一款优秀的前端模块化css框架.我用layui做过两个完整的项目,对她的感觉就是,这货非常适合做后台管理界面,且基于jquery,很容易上手.当然,她最大的优点我觉得还是她的模块化方式,相 ...
禁用/启用按钮和链接的最简单方法是什么（jQuery + Bootstrap）
本文翻译自:What is the easiest way to disable/enable buttons and links (jQuery + Bootstrap) Sometimes I u ...
设置html按钮点击事件无效果,css怎么设置按钮不能点击？
css怎么设置按钮不能点击?下面本篇文章就来给大家介绍一下使用CSS设置按钮不能点击的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 想要按钮不能点击可以通过设置按钮点击事件失 ...
vc下禁止按钮连续点击的方法
最近接手的项目需要(其实就是一个桌面小软件),需要通过MFC上的上一页和下一页按钮,控制CHTMLCTRL的显示.但CHTMLCTRL显示是有延迟的,一旦按钮点击过快,该控件会无法及时响应.所以,需要 ...
android 按钮点击动画效果_如何用纯css打造类materialUI的按钮点击动画并封装成react组件...
作为一个前端框架的重度使用者,在技术选型上也会非常注意其生态和完整性.笔者先后开发过基于vue,react,angular等框架的项目,碧如vue生态的elementUI, ant-design-vu ...
非常漂亮的Web前端波形点击效果
非常漂亮的Web前端波形点击效果介绍一种Web前端波形点击效果,第一次发文,大佬勿喷. 我的博客介绍 Waves 这需要 Waves ,但是作者早在2018年就停止了对他的更新. 官网:Waves ...

关于前端按钮点击之后禁用的方法总结

方法1.设置属性disabled

方法2. 移除监听事件

关于前端按钮点击之后禁用的方法总结相关推荐

最新文章

热门文章