我一直在玩事件冒泡，并发现了一些新的东西......
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html onclick="alert('html')" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
<title>Frame B Title</title>
</head>
<body onclick="alert('Click body')" onload="top.ldfunc(window,'B')" class="Resize" id="idB">
<p> Body of frame B</p>
<p>
<a href="javascript:var display=window.open ('PageC.htm', 'display');">PageC</a>
</p>
<p id="p1" onclick="alert('Click p')"style="color:#00FF00">
some text
<div id="IMAGES2" onclick="alert('Click div');">
asdfg
</div>
more text
</p>
<p style="color:red">
red
<p style="color:blue">
blue
</p>
more red
</p>
</body>
</html>
首先，我使用 div 对一些内容进行分组，而不是将其视为像 widgy 这样的段落。我惊讶地发现 div 和 p 元素不能嵌套。他们似乎将任何 parent 拒之门外。我不知道这个例子中的 DOM 树是什么样的。 “更红”文本是 div 的一部分吗？
其次，我在 html 标签上放置了一个 onclick 事件(是的，我知道 W3 中没有提到它，但我想我还是会尝试一下)，并且再次惊讶地发现 html 事件发生在 body 事件之前。
顺便说一句，这通过了 W3 验证。
p和div应该这样工作吗？html标记可以有 onclick 吗？- 为什么 html 事件发生在 body 事件之前？
- 如何在我希望处理事件时停止事件冒泡？
最佳答案
-
div 内的
p 工作正常，但反之则不行(可能是因为 p 用于保存内联内容)。
是的，html 标签可以有 onclick。
这有时是特定于浏览器的。 4. 中的链接提供了 stopPropagation() 方法的详细信息，这是一个很好的替代方法。阅读 cancelBubble 属性和 stopPropagation() 以处理冒泡。如果您使用 jQuery，那就容易多了，我认为 stopPropagation 在 jQuery 中可以很好地工作。
检查这个(还有演示):http://help.dottoro.com/ljgfjsxd.php
关于javascript - 事件冒泡实验(你知道div和p标签不能嵌套吗？)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3684561/