0 
<script>
$(document).ready(function()
  {
  $("a").click(function(){
   alert("Anchor Clicked !")  });

  $("p").click(function(){
   alert("p Clicked !")  });

});
</script>
</head>
<body>
<a href = "#"><p>Click Me ! </p> </a>
</body>
</html>

当我先点击链接alert("p Clicked !") 然后 alert("Anchor Clicked !") 出现。

我想知道观察到这种行为？

PS：我无法提供合适的标题，欢迎编辑

4

1 回答 1

1

这是因为Event bubbling

当您使用事件冒泡时

                A
               / \
---------------| |-----------------
| element1     | |    a  tag      |
|   -----------| |-----------     |
|   |element2  | |    p  tag      |
|   -------------------------     |
|        Event BUBBLING           |
-----------------------------------

阅读什么是事件冒泡和捕获？

阻止Event bubbling

使用event.stopPropagation

jsfiddle 演示

于 2013-10-07T14:27:13.537 回答