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中使用相同的函數，並管理該函數內部的打開以僅調用一次窗口，這將起作用。

編輯：如果您至少關心搜索引擎優化，則不應為鏈接使用該標題，而應根據頁面的上下文/外觀，更多地提及下一頁的內容，例如“房屋詳細信息”。