HTML: Browser ouvre 2 onglets quand quelqu'un clique sur un lien sur mon site web?

Question

J'ai le code HTML suivant:

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

Si la personne passe au-dessus de la partie de la DIV qui n'est pas le lien hypertexte, il ouvre une seule fenêtre.

Si la personne clique sur le lien hypertexte dans la DIV, il ouvre 2 fenêtres (une pour la DIV et une pour le lien hypertexte).

Y a-t-il un moyen de contourner ce scénario de fenêtre d'ouverture 2x?

Answer 1

La solution simple:

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

Answer 2

Cela est dû au fait que l'événement click augmente. Il initie lorsque vous cliquez sur l'élément d'ancrage, que les bulles jusqu'à la div, et exécute aussi.

Vous devez capturer l'événement click dans le div (à l'aide d'une fonction), puis appeler la méthode stopPropagation de l'événement pour l'empêcher de bouillonner.

Plus d'informations sur l'événement bouillonnant ici: http://www.quirksmode.org/js/events_order.html

Answer 3

Vous pouvez faire cliquable div en faisant le lien dans un élément de bloc avec css

div a { 
    display: block; 
} 

Answer 4

Vous pouvez utiliser la même fonction à la fois la DIV et A HREF, et gérer l'ouverture à l'intérieur de cette fonction pour appeler la fenêtre une seule fois, cela va fonctionner. Edit: Si vous vous souciez au moins un peu de Search Engine Optimization, vous ne devriez pas utiliser cette légende pour le lien, mais plus quelque chose mentionnant le contenu de la page suivante, comme "Détails de la maison" ou mieux selon le contexte/look de la page.

Answer 5

je suis tombé sur la même question et s'il vous plaît don `t rire sur mon erreur stupide. Mais deux onglets ouvrais parce que j'ai un lien et ayant target = « _ blank » et appelant également une fonction aussi sur le même comme:

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

où j'ai également ajouté la cible _blank. J'ai enlevé l'attribut de cible de l'ancre et cela fonctionne bien pour moi. J'espère que vous ne faites pas la même chose.