HTML：当有人单击我的网站上的链接时，浏览器会打开2个选项卡？

Question

我有以下HTML代码：

<div onclick="window.open('http://example.com')" >
<p>1234 Main St, New York, NY</p>
<p>Price: $200,000/p>
<p>4 Beds / 3 Baths</p>
<p>2000 sqft</p>
<a href="http://example.com">More Info</a>
</div>

如果此人将鼠标悬停在DIV的非超链接部分上，则只会打开一个窗口。

如果该人单击DIV中的超链接，则会打开2个窗口（一个用于DIV，一个用于超链接）。

有什么办法可以解决这种2倍打开窗口的情况？

Answer 1

简单的解决方案：

<a href="http://example.com" onclick="return false;">More Info</a>

Answer 2

您可以通过使用CSS使链接成为一个块元素来使div可点击

div a {
    display: block;
}

Answer 3

我遇到了同一问题，请不要为我的愚蠢错误大笑。 但是两个选项卡正在打开，因为我有一个链接，并具有target ='_ blank'，并且也在相同的地方调用了一个函数，例如：

<pre>
$('#foo').on('click',function(){
// some code
window.open("https://www.google.com","_blank");
});

我也在哪里将目标添加为_blank。 我从锚中删除了目标属性，它对我来说很好。 希望你做的不一样。

Answer 4

这是因为click事件冒泡了。 当您单击锚元素时，它会启动，然后气泡到div并执行。

您需要捕获div内部的click事件（使用函数），然后调用该事件的stopPropagation方法以阻止它冒泡。

有关事件冒泡的更多信息， 请参见 ： http : //www.quirksmode.org/js/events_order.html

Answer 5

您可以在DIV和A HREF中使用相同的函数，并管理该函数内部的打开以仅调用一次窗口，这将起作用。

编辑：如果您至少关心搜索引擎优化，则不应为链接使用该标题，而应根据页面的上下文/外观，更多地提及下一页的内容，例如“房屋详细信息”。