<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="jquery-3.1.0.js"></script> <script type="text/javascript"> $(function(){ //冒泡事件 $("#d3").click(function(){ alert(3); event.stopPropagation()//停止冒泡事件 }) $("#d2").click(function(){ alert(2); }) $("#d1").click(function(){ alert(1); }) //在单击d3的时候,外层的d2 d1也会触发click事件 //阻止默认行为 /* 网页中的元素有自己的默认行为 如:单击超链接被跳转,单击提交按钮会提交表单 可以使用 event.preventDefault() 阻止元素的默认行为 停止冒泡事件和阻止元素的默认行为,都可以简写为return false */ /* 事件对象:event 移除事件绑定:unbind */ }) </script> </head> <body> <div id="d1"> <div id="d2"> <div id="d3"> 嘻嘻 </div> </div> </div> </body> </html>