Comment faire un DIV complet cliquable avec une ancre ... mais à l'intérieur de ce DIV, avoir un bouton d'entrée qui ne suit pas cette ancre?

Question

J'ai essayé ceci:

<div style="display:block;"> 
<a href="/go" style="display:block;height:100%;width:100%;position:absolute;"></a> 
LOTS OF STUFF HERE 
<input type="button" onclick="runsomething();return false;"> 
</div> 

Mais il ne fonctionne pas. Il clique pour suivre l'ancre ... mais le bouton suit aussi l'ancre, ce que je ne veux pas.

Éditer: Le bouton ne cliquera même pas. Il ne va pas appuyer! C'est comme si l'ancre l'avait complètement recouvert.

Answer 1

Vous pouvez empêcher l'événement de se propager à partir du bouton de façon à ce qu'il n'arrive jamais à la DIV.

$(".myDiv input").click(function(e){ 
    e.stopPropagation(); 
}); 

Pour plus d'informations sur event.stopPropagation, voir http://api.jquery.com/event.stopPropagation/

Pour une raison quelconque, vous avez votre point d'ancrage prenant toute la taille du conteneur parent. Pourquoi? Cela couvrira votre bouton, ce qui le rendra probablement non verrouillable. Je comprends que vous souhaitiez rendre l'intégralité du DIV cliquable, mais c'est la mauvaise approche. Considérez ce qui suit:

$(".myDiv").click(function(){ 
    window.location = $("a:first", this).attr("href"); 
}); 

Ceci provoquerait un clic sur ce DIV pour envoyer l'utilisateur là où son lien les aurait envoyés. La meilleure chose est que vous n'avez pas besoin d'ajouter de CSS à votre lien, ou DIV. Javascript ira et trouvera le lien dans le div, obtiendra sa valeur href, et enverra l'utilisateur dans cette direction.