Javascript 带有onclick的包装器优先于带有href的子级

我有一个包装盒，它有一个onclick事件，使整个包装盒可以进入另一个页面，如下所示：

<div onclick="window.location='http://dom.com/page1/'">
    <p>Title</p>
    <img alt='img' />
    <p>Some text</p>
    <a href="http://dom.com/page2/">My link</a>
    <p>Some more text</p>
</div>

头衔

一些文本

更多的文字

问题是，子链接永远不会转到第2页，因为父onclick具有优先权，无论您在哪里单击该框，您都会在第1页结束

有没有办法解决这个问题，我需要能够在点击框的任何位置时转到第1页，但在点击链接时转到第2页。

onclick处理程序是老式的。我建议下载并包含在HTML中，然后像这样使用：

<script src="main.js"></script>

您可能不需要e.preventDefault（）；行，在浏览器执行之前更改浏览器的位置

---

此外，避免将单击处理程序应用于标记也是一种很好的做法。也许您应该使用两个标签和CSS来正确地定位和分层这两个标签

您应该研究事件捕获和事件冒泡。这是一篇很好的文章，可以让你开始学习

其中一个技巧是使用锚定标记而不是

div

，并使其成为块级元素：

<a href="http://dom.com/page1/" style="display: block; text-decoration: none;">
   <p>Title</p>
   <img alt='img' />
   ...
</a>

---

当JS被禁用时，这也会起作用，唯一的缺点是它不是很优雅。

我经常使用jQuery，而且它总是每个项目的一部分，但是我不知道如何让你的代码片段工作。你能再详细一点吗？ps。你应该尝试使用CSS“display:block”来代替a。然后，将内部替换为标记，并使用CSS对其进行相应的格式化。这将完全消除对JavaScript的需求（在本例中），使用锚作为包装器的问题是它将无法验证。必须有更好的选项。@Mark没有人强迫您使用严格的HTML，我相信在“松散”模式下，它会很好地验证。

<a href="http://dom.com/page1/" style="display: block; text-decoration: none;">
   <p>Title</p>
   <img alt='img' />
   ...
</a>