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 и одно для гиперссылки).

Есть ли способ обойти этот сценарий с открывающимся окном 2x?

Answer 1

Простое решение:

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

Answer 2

Вы можете сделать div кликабельным, превратив ссылку в элемент блока с помощью css

div a {
    display: block;
}

Answer 3

Я столкнулся с той же проблемой, и, пожалуйста, не смейтесь над моей глупой ошибкой.Но две вкладки открывались, потому что у меня есть ссылка и целевая = '_ blank', а также вызываю функцию тоже самое, например:

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

, где я также добавилцель как _blank.я удалил целевой атрибут из якоря, и он отлично работает для меня.Надеюсь, вы не делаете то же самое.

Answer 4

Вы можете использовать одну и ту же функцию как в DIV, так и в A HREF, и управлять открытием внутри этой функции, чтобы вызывать окно только один раз, и это будет работать.

Редактировать: Если вам не менееНемного о поисковой оптимизации. Вы не должны использовать этот заголовок для ссылки, но больше о содержании следующей страницы, например, "Детали дома" или, что лучше, в зависимости от контекста / внешнего вида страницы.

Answer 5

Это потому, что событие щелчка вспыхивает.Он инициируется, когда вы щелкаете по элементу привязки, затем всплывает до элемента div и выполняет это тоже.

Вам необходимо захватить событие click внутри элемента div (используя функцию), а затем вызвать событие stopPropagation метод, чтобы остановить это всплывающее окно.

Подробнее о всплывающем событии здесь: http://www.quirksmode.org/js/events_order.html