Question

我有一个包装盒，它有一个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页。

Answer 1

“onclick”处理程序是老派。我建议您在HTML中下载并添加jQuery，然后像这样使用它：

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

main.js：

jQuery( document ).ready(function(){
  jQuery( "div" ).click( function( e ){
    window.location='http://dom.com/page1/';
    e.preventDefault();
  };
} );

您可能不需要e.preventDefault（）; line，因为您在浏览器执行之前更改了它的位置。

此外，最好避免将点击处理程序应用于代码。也许您应该使用两个标签和CSS来正确地定位和分层到彼此的两个顶部。

Answer 2

您应该研究事件捕获和事件冒泡。 Here是一篇很棒的文章，可以帮助您入门。

Answer 3

围绕它的一个方法是使用锚标记而不是div并使其成为块级元素：

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

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

onclick的包装优先于具有href的子项

3 个答案: