如何如何禁用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">
	<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>
	<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>
不过这个解决方案看起来怪怪的，应该还有其他方法，如果各位知道的话请留言告知。