<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .father{ width: 200px; height: 200px; background: red; } .son{ width: 100px; height: 100px; background: blue; } </style> <script type="text/javascript" src="jquery-1.10.1.min.js"></script> </head> <body> <script> $(function() { //“冒泡事件:微软提出的 事件由子元素传递到父元素的过程,叫做冒泡” //但是在实际项目开发中，我们可能并不需要元素的默认行为，所以就可以通过以下方式进行禁止。 $(".son").click(function(event) { // return false;//不仅阻止了事件往上冒泡，而且阻止了事件本身。 event.stopPropagation();//则只阻止事件往上冒泡，不阻止事件本身。 }); //“冒泡事件:微软提出的 事件由子元素传递到父元素的过程,叫做冒泡” //但是在实际项目开发中，我们可能并不需要元素的默认行为，所以就可以通过以下方式进行禁止。 $(".father").click(function() { alert("father"); }); $("a").click(function(event) { event.preventDefault();//阻止默认行为 alert("陈业贵"); }); }); </script> <div class="father"> <div class="son"></div> </div> <a href="http://www.baidu.com">注册</a> <form action="http://www.taobao.com"> <input type="text"> <input type="submit"> </form></body> </html>
jQuery第二十四篇 事件冒泡和默行为
关注
打赏
