如何如何禁用div不能点击?div disabled不能点击 不能click div禁用无效

简介: 如何如何禁用div不能点击?div disabled不能点击 不能click div禁用无效

div经常会被用来做按钮,有时候我们需要禁用按钮,让它不可被点击,一般我们会想到用disabled属性:

$(".btn").attr("disabled", true); //设置禁用
//经过测试根本没用!div设置了这个属性与click事件无关,照样能点击


image.gif

网上搜索一大把都是这样写的,然而根本没用!!设置为disabled了照样可以点击。那些转帖的人根本不动脑子。

至于为什么没用,具体的原因我也不清楚,猜测大概对于div而言,disabled只是让它内部的元素禁用吧,而对于本身的事件毫无影响,事实反正就是这样的,有兴趣深入了解的可以写个代码测试下。

说了这么多现在给出标准答案吧。

设置禁用:

$(".btn").css("pointer-events","none"); 


image.gif

解禁:

$(".btn").css("pointer-events","");  


image.gif

如果要优雅点可以建立个class,然后用addClass和removeClass,下面是完整测试,禁用的时候将div里面的文字标记为灰色了,这样更符合我们的使用习惯。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
  <link rel="stylesheet" href="http://at.alicdn.com/t/font_626784_0j006ef09vff.css">
  <script src="https://cdn.staticfile.org/jquery/1.11.2/jquery.min.js"></script>
  <title>div禁用测试</title>
</head>
<style>
.cannotclick{
  pointer-events:none;
}
</style>
<body>
  <div id="testdiv">点我测试</div>
  <input type="button" id="jinyong" value="禁用div">
  <input type="button" id="qiyong" value="启用div">
</body>
<script>
$("#testdiv").click(function(){
  alert("点击了!");
});
$("#jinyong").click(function(){
  $("#testdiv").addClass("cannotclick");
  $("#testdiv").css("color", "#ccc");
  alert("该div已经被禁用,点击将不会有任何反应!");
});
$("#qiyong").click(function(){
  $("#testdiv").removeClass("cannotclick");
  $("#testdiv").css("color", "#000");
  alert("该div已经恢复正常,点击测试看看,它的事件将会正常触发");
});
</script>
</html>

不过这个解决方案看起来怪怪的,应该还有其他方法,如果各位知道的话请留言告知。

目录
相关文章
|
6月前
|
前端开发
解决elementUI弹出框关闭后再打开el-select下拉框无法选中的问题
解决elementUI弹出框关闭后再打开el-select下拉框无法选中的问题
157 0
element 下拉菜单el-dropdown如何更改样式?
element 下拉菜单el-dropdown如何更改样式?
914 0
element中使用走马灯效果el-carousel点击按钮切换第几页demo效果示例(整理)
element中使用走马灯效果el-carousel点击按钮切换第几页demo效果示例(整理)
el-popover 点击取消按钮,弹窗仍然无法关闭
el-popover 点击取消按钮,弹窗仍然无法关闭
|
12月前
layui的富文本编辑器layedit设置禁用状态
layui的富文本编辑器layedit设置禁用状态
119 0
|
12月前
layUI禁用select下拉框
layUI禁用select下拉框
185 0
18zTree - Checkbox chkDisabled 禁用演示
18zTree - Checkbox chkDisabled 禁用演示
41 0
22zTree - Radio 勾选操作
22zTree - Radio 勾选操作
53 0
不使用el-form仅仅单独给el-input设置表单校验
不使用el-form仅仅单独给el-input设置表单校验
394 0
element-ui:el-autocomplete实现搜索结果多次点击不关闭弹框
element-ui:el-autocomplete实现搜索结果多次点击不关闭弹框
226 0
element-ui:el-autocomplete实现搜索结果多次点击不关闭弹框