gpt4 book ai didi

javascript - 事件冒泡实验(你知道div和p标签不能嵌套吗?)

转载 作者:行者123 更新时间:2023-12-02 20:33:34 24 4
gpt4 key购买 nike

我一直在玩事件冒泡,并发现了一些新的东西......

<!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 这样的段落。我惊讶地发现 divp 元素不能嵌套。他们似乎将任何 parent 拒之门外。我不知道这个例子中的 DOM 树是什么样的。 “更红”文本是 div 的一部分吗?

其次,我在 html 标签上放置了一个 onclick 事件(是的,我知道 W3 中没有提到它,但我想我还是会尝试一下),并且再次惊讶地发现 html 事件发生在 body 事件之前。

顺便说一句,这通过了 W3 验证。

  1. pdiv 应该这样工作吗?
  2. html 标记可以有 onclick 吗?
  3. 为什么 html 事件发生在 body 事件之前?
  4. 如何在我希望处理事件时停止事件冒泡?

最佳答案

    div 内的
  1. p 工作正常,但反之则不行(可能是因为 p 用于保存内联内容)。

  2. 是的,html 标签可以有 onclick。

  3. 这有时是特定于浏览器的。 4. 中的链接提供了 stopPropagation() 方法的详细信息,这是一个很好的替代方法。阅读 cancelBubble 属性和 stopPropagation() 以处理冒泡。如果您使用 jQuery,那就容易多了,我认为 stopPropagation 在 jQuery 中可以很好地工作。

  4. 检查这个(还有演示):http://help.dottoro.com/ljgfjsxd.php

关于javascript - 事件冒泡实验(你知道div和p标签不能嵌套吗?),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3684561/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com