2013-03-27 4 views
25

J'ai un grand div à l'intérieur qui sont des divs plus petits, des balises achor et d'autres éléments. Chaque grande div de mon programme est liée à l'événement "mousedown" et à l'intérieur du gestionnaire onMouseDown, je vérifie fondamentalement le event.target.Vérifiez si la cible de l'événement est un lien hypertexte

Si un utilisateur clique sur un élément qui est un lien hypertexte, je veux vérifier si event.target était un lien hypertexte, puis accédez à ce lien si event.target était un lien hypertexte. Comment cela peut-il être fait?

Voici la structure de la divsa et des éléments.

<div class="camp-name"> 
    <span class="btnCampaign"><div class=""></div></span> 
    <span class="campaign-name"> 
     <a href="http://www.google.com">Some Link here</a> 
    </span> 
</div> 
<div class="campaign-name-sub"> 
    <span class="campaign-accountname">Some Text here</span> 
    <span class="seprator">|</span> 
    <span class="brandname">Some Text here</span> 
</div> 

JS

var label = label.createElement("DIV"); 
label.innerHMTL = src //src is the above html that is seen here 
    Plugin.addEventListener(label, "mousedown", params.onMouseDown); 


Plugin.onMouseDown() = function(event) { 
var target = (event.currentTarget) ? event.currentTarget : event.srcElement; 
     if (target.tagName.toLowerCase() === "a" && target !== undefined) { 
      console.log(target.href); 
      Plugin.stopPropagation(event); 
     } 
}; 
+0

pouvez-vous mettre un peu de code .... comme comment vos divs sont organisés et d'autres choses – theshadowmonkey

+0

Je pense que l'événement est géré par le parent DIV. Essayez console.log (event) dans Chrome de préférence et vous devriez voir tous les paramètres que vous pouvez manipuler. Je pense que cela devrait aider dans une certaine direction – theshadowmonkey

Répondre

55

Vous devriez l'obtenir par

if(event.target.tagName.toLowerCase() === 'a') 
{ 
    event.target.href; //this is the url where the anchor tag points to. 
} 
+0

et le comparer à quoi? (Je sais, mais vous devriez l'inclure pour une réponse complète.) – Mathletics

+0

Cela signifie que if (event.target.tagname === 'a') {window.location.href = event.target}. Comment est-ce écrit correctement en JavaScript? – user1240679

+0

a modifié sa réponse –

0

J'ai essayé de modifier votre code et il y avait plusieurs problèmes avec le code et les corriger.

Ceci est la partie JavaScript

var src = '<div class="camp-name"><span class="btnCampaign"><div class=""></div></span><span class="campaign-name"><a href="http://www.google.com">Some Link here</a></span></div>'; 

var label = document.createElement('DIV') 
label.innerHTML = src; 
var topdiv = document.getElementById("test"); 
console.log(label) 
topdiv.appendChild(label); 

label.addEventListener('click', test, false); 

function test(event) { 
    if(event.target.tagName.toLowerCase() === 'a') { 
     var href = event.target.href; 
     console.log(href); 
    } 
    window.location = href; 
}; 

Ceci est la partie HTML de celui-ci

<div id="test"> 
test 
</div> 

Je l'ai fait dans un jsFiddle http://jsfiddle.net/KDejm/1/

S'il vous plaît laissez-moi savoir si le vent est capturé correctement.

+0

Le problème ici est que je veux écrire javascript unobstrive sans utiliser id/classe spécifique si j'écris quelque chose comme find() (probablement chercher une balise est toujours bien dans le sens où si 'a' est là, alors naviguez vers elle) Si je clique sur un élément autre que le tag, je ne souhaite pas accéder à ce lien. Au lieu de faire quelque chose de cet événement mouseDown que j'ai déjà – user1240679

+0

édité ... il suffit de mettre la partie window.location à l'intérieur du si :) – theshadowmonkey

+0

Dans mon javascript, j'ai un div plus grand et comme je l'ai écrit dans mon post, ce div plus grand est obtenir le HTMl de quelque part et l'afficher par '.innerHTML'. Ce div plus grand est celui qui a l'événement 'mousedown' lié et je ne suis pas autorisé à changer ce code particulier. Donc, en substance, je cherchais un moyen de vérifier si event.target a une balise d'ancrage (si c'est le cas, alors naviguez) De plus, pas de jQuery autorisé pour le moment en raison du style de codage précédent. – user1240679

Questions connexes