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