Comment puis-je simuler un clic sur une balise d'ancrage?

Question

Comment puis-je simuler un clic sur une balise d'ancrage?

Demandé el 14 de Septembre, 2009: Quand la question a-t-elle été
44337 affichage: Nombre de visites la question a
3 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je sais que c'est semblable à cette question et à cette question, mais étant donné que les solutions n'ai pas l'adresse de la "cible" de la propriété.

Je veux simuler un clic à une balise d'ancrage avec tous les extras comme cible correcte de la manipulation.

Il semble y avoir un "click()" méthode d'ancrage de l'objet DOM, mais pas tous les navigateurs prennent en charge que. Firefox met cette erreur:

Erreur: anchorObj.cliquez sur n'est pas une fonction

Il travaille aussi étrangement sur Opera 10 et Konqueror, provoquant infini de clics pour arriver lorsqu'elle est appelée à l'intérieur onclick gestionnaire d'un div entourant. Je suppose que IE8 fonctionne très bien avec elle. De toute façon je ne veux pas de ça depuis les principaux navigateurs pour la plupart ont des problèmes avec elle.

J'ai trouvé cette solution de rechange pour Firefox de Mozilla forums:

var evt = document.createEvent("MouseEvents"); 
evt.initMouseEvent("click", true, true, window, 
    0, 0, 0, 0, 0, false, false, false, false, 0, null); 
anchorObj.dispatchEvent(evt);

Cela semble trop laid et trop lourde pour moi. Je ne sais pas comment il est compatible et je veux éviter d'écriture spécifiques au navigateur de code autant que possible.

Je ne peux pas utiliser la localisation.href = anchorObj.href; car il ne gère pas la "cible" de l'attribut. Je peux faire quelques codage en dur des cibles en fonction de la valeur, mais je voudrais éviter cela.

Là, c'est la suggestion de passer à JQuery mais je ne suis pas sûr de la façon dont il gère la propriété cible soit, puisque je n'ai pas travaillé avec avant.

Demandé el 14 de Septembre, 2009 par ssg

Answer 1

3 Réponses

Answer 2

68voto

Crescent Fresh Points 54070

Ici est un cas de test qui simule l' click événement, les appels de tous les gestionnaires d'attaché (cependant ils ont été attachés), maintient l' "target" d'attribut ("srcElement" dans IE), des bulles comme un événement normal, et émule d'IE récursivité de prévention. Testé dans 2 FF, Chrome 2.0, Opera 9.10 et bien sûr IE (6):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
function fakeClick(event, anchorObj) {
  if (anchorObj.click) {
    anchorObj.click()
  } else if(document.createEvent) {
    if(event.target !== anchorObj) {
      var evt = document.createEvent("MouseEvents"); 
      evt.initMouseEvent("click", true, true, window, 
          0, 0, 0, 0, 0, false, false, false, false, 0, null); 
      var allowDefault = anchorObj.dispatchEvent(evt);
      // you can check allowDefault for false to see if
      // any handler called evt.preventDefault().
      // Firefox will *not* redirect to anchorObj.href
      // for you. However every other browser will.
    }
  }
}
</script>
</head>
<body>

<div onclick="alert('Container clicked')">
  <a id="link" href="#" onclick="alert((event.target || event.srcElement).innerHTML)">Normal link</a>
</div>

<button type="button" onclick="fakeClick(event, document.getElementById('link'))">
  Fake Click on Normal Link
</button>

<br /><br />

<div onclick="alert('Container clicked')">
    <div onclick="fakeClick(event, this.getElementsByTagName('a')[0])"><a id="link2" href="#" onclick="alert('foo')">Embedded Link</a></div>
</div>

<button type="button" onclick="fakeClick(event, document.getElementById('link2'))">Fake Click on Embedded Link</button>

</body>
</html>

Démo ici.

Il évite la récursivité dans la non-IE navigateurs par l'inspection de l'objet d'événement qui lance la simulation, cliquez sur, par l'inspection de l' target attribut de l'événement (qui reste inchangée lors de la propagation).

Évidemment, IE ne présente interne de la tenue d'une référence à ses global event objet. DOM niveau 2 définit pas une telle variable globale, et pour cette raison, le simulateur doit passer dans sa copie locale d' event.

Répondu el 14 de Septembre, 2009 par Crescent Fresh (54070 Points )

Answer 3

11voto

Chris Shouts Points 3542

Cité de https://developer.mozilla.org/en/DOM/element.click

La méthode de clic est destiné à être utilisé avec les éléments INPUT de type button, checkbox, radio, réinitialiser ou soumettre. Gecko ne pas mettre en œuvre la méthode click sur d'autres éléments qui pourraient être prévu pour répondre à des clics de souris, tels que les liens (les éléments A), ni nécessairement le feu de l'événement click d'autres éléments.

Non Gecko DOMs peuvent se comporter différemment.

Malheureusement, il semble que vous avez déjà découvert que la meilleure solution à votre problème.

Comme une note de côté, je suis d'accord que ta solution me semble pas l'idéal, mais si vous encapsuler la fonctionnalité à l'intérieur d'une méthode (un peu comme JQuery serait de le faire) il n'est pas si mal.

Répondu el 14 de Septembre, 2009 par Chris Shouts (3542 Points )

Answer 4

9voto

Peter Bailey Points 62125

Eh bien, vous pouvez très rapidement tester l’envoi de clics via jQuery comme

 $('#link-id').click();

Si vous ne parvenez toujours pas à respecter la cible, vous pouvez toujours le faire.

 $('#link-id').click( function( event, anchor )
{
  window.open( anchor.href, anchor.target, '' );
  event.preventDefault();
  return false;
});

Répondu el 14 de Septembre, 2009 par Peter Bailey (62125 Points )

Comment puis-je simuler un clic sur une balise d'ancrage?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment puis-je simuler un clic sur une balise d'ancrage?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: