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，下面是完整测试
<!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>
不过这个解决方案看起来怪怪的，应该还有其他方法，如果各位知道的话请留言告知。
网友评论