javascript - 当 anchor 在另一个 anchor 内动态创建时，为什么 href 不起作用？-6ren

javascript - 当 anchor 在另一个 anchor 内动态创建时，为什么 href 不起作用？

转载作者：行者123 更新时间：2023-12-01 01:41:15

场景 1:

我有一个带有 onclick="return false;" 的 anchor ，然后我在其中动态添加另一个 anchor 。当父 anchor 具有 onclick="return false;" 时，href 不起作用，但当我删除该 onclick 时，它工作正常。

<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head></head>
  <body>
    <a id="link1" onclick="return false;"></a>
    <script>
       var link = document.getElementById('link1')
       var newLink = document.createElement('a')
       newLink.setAttribute('href','https://wwww.google.com')
       newLink.innerHTML="google"
       //link.insertAdjacentElement('beforeend', newLink)
       link.appendChild(newLink)
    </script>
 </body>
</html>

场景 2:

我只有两个 anchor ，其中父 anchor 的 onclick 为 return false。但在这种情况下，内部 anchor 的 href 工作正常。

<a onclick="return false;"><a href="https://www.google.com">google</a></a>

所以问题是，当我在另一个 anchor 中动态添加 anchor 时，使用 onclick 作为 return false 然后内部 anchor 的 href 不起作用，但静态创建它们时工作正常。

有人可以帮助我理解这种行为吗？

最佳答案

浏览器不会像您期望的那样解析它的嵌套，但 JavaScript 设法进入嵌套。

嵌套a HTML 语法中禁止使用元素。 HTML规范没有说明原因；他们只是强调规则。

在实际方面，浏览器在其解析规则中有效地强制执行此限制，因此与许多其他问题不同，违反规范是行不通的。解析器有效地处理 <a>在打开的元素内添加开始标记，作为在开始新元素之前隐式终止打开的元素。

所以如果你写<a href=foo>foo <a href=bar>bar</a> zap</a> ，你不会得到嵌套元素。浏览器会将其解析为 <a href=foo>foo</a> <a href=bar>bar</a> zap ，即两个连续的链接后跟一些纯文本。

关于javascript - 当 anchor 在另一个 anchor 内动态创建时，为什么 href 不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52400888/

文章推荐： javascript - 获取传单中 WMS 的最小缩放级别

文章推荐： angular - 在azure linux应用程序服务中托管 Angular 应用程序

文章推荐： javascript - 如何从

首页

博学

6Ren·AI

商城

javascript - 当 anchor 在另一个 anchor 内动态创建时，为什么 href 不起作用？