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

Question

I have the following HTML code:

<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>

If the person hovers over the part of the DIV that is not the hyperlink, it only opens one window.

If the person clicks on the hyperlink within the DIV, it opens 2 windows (one for the DIV and one for the hyperlink).

Is there any way around this 2x opening window scenario?

Answer 1

简单的解决方案：

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

Answer 2

You could make the div clickable by making the link into a block element with css

div a {
    display: block;
}

Answer 3

I came across the same issue and please don`t laugh on my silly mistake. But two tabs was opening because i am having a link and having target='_blank' and also calling a function too on the same like:

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

where also i have added the target as _blank. i removed the target attribute from the anchor and it works fine for me. Hope you are not doing same.

Answer 4

That's because the click event bubbles up. It initiates when you click the anchor element, than bubbles up to the div, and executes that too.

You need to capture the click event inside the div (using a function), and then call the event's stopPropagation method to stop it from bubbling up.

More info about event bubbling here: http://www.quirksmode.org/js/events_order.html

Answer 5

You could use the same function in both the DIV and the A HREF, and manage the opening inside that function to call the window only once, that will work.

Edit : If you care at least a little about Search Engine Optimization you should not use that caption for the link, but more something mentionning the content of the next page like "House details" or better depending of the context/look of the page.