1.阻止默认行为:通常是值一个标签的默认行为,如button的提交表单,a标签的跳转等。
那如何阻止标签的默认行为?
1)return false
2) e.preventDefault();
<!DOCTYPE html> <html> <head> <title>queue</title> <meta charset="utf-8"> <script type="text/javascript" src="js/jquery.js"></script> </head> <body> <!-- 设置五幅图片 --> <div> <a class="a1" href="http://www.baidu.com">百度入口一(被阻止)</a> <a class="a2" href="http://www.baidu.com">百度入口二(可使用)</a> </div> <script type="text/javascript"> $(function(){ $('.a1').click(function(e){ //return false; e.preventDefault(); }); }) </script> </body> </html>
其中return false不仅阻止默认行为还会阻止冒泡。
2.阻止事件冒泡
事件冒泡是指如果子元素与父元素或者祖先元素包含同样的事件,如click等,当点击子元素时,父元素上的点击事件也会触发。
阻止时间冒泡的方法:
1)return false
2)e.stoppropagation();
<!DOCTYPE html> <html> <head> <title>queue</title> <meta charset="utf-8"> <script type="text/javascript" src="js/jquery.js"></script> </head> <body> <div class="div3"> div3 <div class="div2"> div2 <div class="div1">div1</div> </div> </div> <script type="text/javascript"> $(function(){ $('div').click(function(e){ alert(e.target.className); e.stopPropagation(); //return false; }); }) </script> </body> </html>
总结:return false会阻止事件冒泡和默认行为
e.stopPropagation()只阻止事件冒泡;
e.preventDefault()只阻止默认行为;