jquery 在线编辑器 | jquery代码测试

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
  $("span").click(function(event){
    event.stopPropagation();
    alert("The span element was clicked.");
  });
  $("p").click(function(event){
    alert("The p element was clicked.");
  });
  $("div").click(function(){
    alert("The div element was clicked.");
  });
});
</script>
</head>
<body>

<div style="height:100px;width:500px;padding:10px;border:1px solid blue;background-color:lightblue;">
这是一个 DIV 元素。
<p style="background-color:pink">这是 div 元素中的 p 元素。 <br><span style="background-color:orange">这是 p 和 div 元素中的一个 span 元素。</span></p></div>

<p><b>注意：</b>单击上面的每个元素。 当点击 <b>div</b> 元素时，它会提醒 div 元素被点击。 当点击 <b>p</b> 元素时，它将返回 p 和 div 元素，因为 p 元素在 div 元素内。
但是当点击 <b>span</b> 元素时，它只会返回它自己，而不是 p 和 div 元素（即使它在这些元素中）。 event.stopPropagation() 阻止点击事件冒泡到父元素。 
</p>

<p><b>提示：</b>尝试删除 event.stopPropagation() 行，然后再次单击 span 元素（单击事件现在将冒泡到父元素）。</p>

</body>
</html>

报个问题: