阻止冒泡 · PHP笔记

``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </head> <body> <div id="divOne" onclick="alert('我是最外层！')"> <div id="divTwo" onclick="alert('我是中间层！')"> <a id="hr_three" href="https://www.baidu.com" target="_blank" onclick="alert('我是最里层！')">点击 </a> </div> </div> </body> </html> ``` 比如上面这个页面，分为三层：divOne是第外层，divTwo中间层，hr\_three是最里层; 他们都有各自的click事件，最里层a标签还有href属性。运行页面，点击“点击我”,会依次弹出：我是最里层---->我是中间层---->我是最外层 \---->然后再链接到百度. 这就是事件冒泡，本来我只点击ID为hr\_three的标签，但是确执行了三个alert操作。事件冒泡过程（以标签ID表示）：hr\_three----> divTwo----> divOne 。从最里层冒泡到最外层。如何来阻止? 1.event.stopPropagation(); $(function() { $("#hr\_three").click(function(event) { event.stopPropagation(); }); }); 再点击“点击我”，会弹出：我是最里层，然后链接到百度 2.return false; 如果头部加入的是以下代码 $(function() { $("#hr\_three").click(function(event) { return false; }); }); 再点击“点击我”，会弹出：我是最里层，但不会执行链接到百度页面由此可以看出： 1.event.stopPropagation(); 事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转） 2.return false; 事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转）还有一种有冒泡有关的： 3.event.preventDefault(); 如果把它放在头部A标签的click事件中，点击“点击我”。会发现它依次弹出：我是最里层---->我是中间层---->我是最外层，但最后却没有跳转到百度它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）