JQuery实现(阻止事件冒泡,不触发父级标签点击事件)

使用JQuery可以简单地实现,只需要加入如下代码:

event.stopPropagation();

阻止事件冒泡。

测试代码如下:

  1. <!DOCTYPE html>

  2. <html>

  3. <head>

  4. <meta charset="UTF-8">

  5. <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>

  6. <script type="text/javascript">

  7. $(document).ready(function() {

  8. $("#hanli").bind('click', function(event) {

  9. alert('外层的div被点击了!');

  10. });

  11. $("#dianji").bind('click', function(event) {

  12. alert('里面的a点击,但是不想触发外面那个div的事件。');

  13. event.stopPropagation();

  14. });

  15. });

  16. </script>

  17. <title>JQuery实现点击div里面的a的能触发点击时间,但是不触发外面的div的点击事件</title>

  18. </head>

  19. <body>

  20. <div id="hanli" style="background-color: #DDDDDD; width: 400px; height: 300px; margin: 0px auto;">

  21. <a href="#" id="dianji">点击这里并不让外层的div事件触发</a>

  22. </div>

  23. </body>

  24. </html>