现在我想实现这样的功能:当前有三个并列的div,各自有不同的classname,我希望点击不同的div,在控制台输出当前点击的div的类的名字。
这其实很好实现,一般我们只要为这三个div分别绑定一个click,然后里面设置输出就可以。
但是这里有一个额外的要求,就是:只能绑一个click
实现代码如下:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Event练习</title> <style type="text/css"> .box{width:250px;height:130px;position: absolute;top: 50%;margin-top: -75px;left: 50%;margin-left: -75px;} div.a ,div.b , div.c{width: 40px;height: 40px;margin: 10px;} .a{background: black;float: left;} .b{background: black;float: left;} .c{background: black;float: left;} </style> <script src="js/jquery2.1.3.min.js"></script> <script type="text/javascript"> $(function(){ $("div").click(function(e){ //event.target是原生js,IE不支持,因此这里要做一下封装 var ev = e ? e : window.event; var tarGet = ev ? (ev.target ? ev.target : ev.srcElement) : ""; //封装结束 //tarGet现在还是JavaScript元素,将其转换为jQuery元素 var $target = $(tarGet); console.log($target.attr("class")); }); }); </script> </head> <body> <div class="box"> <div class="a"></div> <div class="b"></div> <div class="c"></div> </div> </body> </html>