如何如何禁用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>

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

sysdzw
+关注
目录
打赏
0
0
0
0
2
分享
相关文章
el-popover 点击取消按钮,弹窗仍然无法关闭
el-popover 点击取消按钮,弹窗仍然无法关闭
layui的富文本编辑器layedit设置禁用状态
layui的富文本编辑器layedit设置禁用状态
156 0
18zTree - Checkbox chkDisabled 禁用演示
18zTree - Checkbox chkDisabled 禁用演示
73 0
解决elementui中el-dropdown下拉菜单禁用项没有鼠标悬浮禁用样式
解决elementui中el-dropdown下拉菜单禁用项没有鼠标悬浮禁用样式
807 0
input checkbox 复选框大小修改
有的时候,需要使用复选框,但是复选框有时候默认的太小,这时候就需要加大复选框。 解决方法: 其实就是zoom属性,这个是放大的意思,可以设置为180%,这样就会比之前大很多。
1537 0
el-dialog弹出框被遮罩层覆盖的解决办法
el-dialog弹出框被遮罩层覆盖的解决办法
1210 0
el-dialog弹出框被遮罩层覆盖的解决办法
ios 添加到cell 上的button点击无效!扩大button的点击区域(黑魔法)
一般情况下点击效果都是正常的!要不然你对它做了什么?一般细心的小伙伴都没有遇到这种情况,但是呢! 当然我是二班的!在这里我主要讲两个问题,解决问题和普及魔法。 一.普及问题(button在cell上点击无效) 自定义一个cell,cell里边creat了一个button!然后调试了半天,什么反应都没有!   1.button的enable 设置为yes可点击的。
1520 0
Bootstrap系列 -- 17. 复选框checkbox和单选择按钮radio
  Bootstrap框架中checkbox和radio有点特殊,Bootstrap针对他们做了一些特殊化处理,主要是checkbox和radio与label标签配合使用会出现一些小问题(最头痛的是对齐问题)。
1297 0
Button 使用Command 按钮置灰未更新
原文:Button 使用Command 按钮置灰未更新 当Button绑定了Command,按钮在窗口弹出、或者其它事件时,会自动置灰. 有时,异步执行时间较长时,界面一些绑定了命令的Button,State不会变化,会一直置灰。
1092 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等