Question

场景1：

我有一个onclick="return false;"的锚，然后在其中动态添加另一个锚。当父锚具有href时，onclick="return false;"不起作用，但是当我删除该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：

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

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

所以问题是，当我在onclick为return false的另一个锚中动态添加锚时，内部锚的href无法正常工作，但当它们是静态创建的。

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

Answer 1

浏览器不会像预期的那样解析嵌套，但是JavaScript设法嵌套了。

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

从实用角度来看，浏览器会在其解析规则中有效实施此限制，因此与许多其他问题不同，违反规范将不起作用。解析器有效地将open元素内的<a>开始标签视为在开始新元素之前隐式终止open元素。

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

当在另一个锚中动态创建锚时，为什么href不起作用？

1 个答案: