Question

<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 !")时。

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

P.S。：我不能带一个合适的标题欢迎编辑

Answer 1

这是由于Event bubbling

使用事件冒泡时

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

阅读What is event bubbling and capturing?

防止Event bubbling

使用event.stopPropagation

jsfiddle DEMO

单击元素中的元素时，jQuery事件优先级

1 个答案: