jQuery如何为所有的div设置点击事件？
分类：Javascript, Others
阅读 (2,575)
Add comments
5月 262016
一、查找所有div元素
在jQuery中使用$(‘div’)来表示全部的div元素，同时使用.click事件设置点击事件，如下面的示例代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]--> <title>jQuery Test</title> <script type="text/javascript" src="jquery.min.js"></script> </head> <body> <div>div1</div> <div>div2</div> <div>div3</div> <div>div4</div> <div>div5</div> <script type="text/javascript"> //获取当前点击的对象 $('div').click( function(){ //this表示当前被点击元素，但是此时我们当做dom对象 //window.alert(this.innerHTML); //$(this) 表示当前被点击元素，但是此时我们当做jquery对象 window.alert($(this).html()); }); </script> </body> </html> |
二、为某个id元素内的所有div设置单击事件
如果我们只想对某个元素内的div执行单击事件，则用如下方式$(“#divid div”)，divid为接受事件的父div的id，代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]--> <title>jQuery Test</title> <script type="text/javascript" src="jquery.min.js"></script> </head> <body> <div id="div1"> <div>div1</div> <div>div2</div> <div>div3</div> <div>div4</div> <div>div5</div> </div> <div id="div2"> <div>div1</div> <div>div2</div> <div>div3</div> <div>div4</div> <div>div5</div> </div> <script type="text/javascript"> //获取当前点击的对象 $('#div1 div').click( function(){ //this表示当前被点击元素，但是此时我们当做dom对象 //window.alert(this.innerHTML); //$(this) 表示当前被点击元素，但是此时我们当做jquery对象 window.alert($(this).html()); }); </script> </body> </html> |
三、为样式为某个class的所有div的子类设置单击事件
同第二部分一样的道理，只是把”#”符号换为”.”符号，代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]--> <title>jQuery Test</title> <script type="text/javascript" src="jquery.min.js"></script> </head> <body> <div class="myclass"> <div>div1</div> <div>div2</div> <div>div3</div> <div>div4</div> <div>div5</div> </div> <div id="div2"> <div>div1</div> <div>div2</div> <div>div3</div> <div>div4</div> <div>div5</div> </div> <div id="div3" class="myclass"> <div>div1</div> <div>div2</div> <div>div3</div> <div>div4</div> <div>div5</div> </div> <script type="text/javascript"> //获取当前点击的对象 $('.myclass div').click( function(){ //this表示当前被点击元素，但是此时我们当做dom对象 //window.alert(this.innerHTML); //$(this) 表示当前被点击元素，但是此时我们当做jquery对象 window.alert($(this).html()); }); </script> </body> </html> |
四、这种情况时如何阻止事件往父元素的传递
默认情况下，html内元素的事件会自动往父元素传递，即冒泡传递，如果div1里嵌套了一个div2，那么单击div2时，div1也会接受到单击事件。给例子一中的5个div元素设置一个父div，您在测试的时候就会发现alert方法执行了两次，第二次输出父类的html。我们可以通过stopPropagation来阻止冒泡传递，如下代码所示：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]--> <title>jQuery Test</title> <script type="text/javascript" src="jquery.min.js"></script> </head> <body> <div> <div>div1</div> <div>div2</div> <div>div3</div> <div>div4</div> <div>div5</div> </div> <script type="text/javascript"> //获取当前点击的对象 $('div').click( function(e){ //this表示当前被点击元素，但是此时我们当做dom对象 //window.alert(this.innerHTML); //$(this) 表示当前被点击元素，但是此时我们当做jquery对象 window.alert($(this).html()); if(event.stopPropagation) event.stopPropagation(); else event.cancelBubble = true; //for ie }); </script> </body> </html> |
因为有些IE的版本不支持stopPropagation，所以cancelBubble 是为适应那些的IE版本
五、总结
同样的，其他的元素也适用于这些操作方法，你可以为所有的p元素、span元素、td元素等设置点击事件。
微信扫一扫，打赏作者吧～