Comment détecter un Lien de clics (texte, images, etc) avec du Javascript?
Je suis en train d'écrire un Cross-Browser script qui détecte lorsque le lien est cliqué sur une page (texte, lien, image, ou othwerwise) afin que je puisse afficher un message ou annonce (comme un interstitiel) et ensuite diriger le visiteur à l'origine cliqué sur l'url de destination.
Le script de a à travailler à partir de la 3e partie des sites (où le propriétaire installe le des balises de script sur son site).
Comment puis-je le faire à l'aide de javascript?
Dois-je utiliser un écouteur d'événement? Dois-je parcourir tous les objets de liaison?
Ou quelque chose d'autre?
Mon javascript compétences sont des débutants/intermédiaires, de manière détaillée, des exemples/explications sont grandement appréciés.
J'ai commencé à l'aide de l'écouteur d'événement ici, mais jusqu'à présent, je suis à la détection de TOUS les clics sur la page:
la méthode addEventListener Extrait du Code de la Traduction et de l'Utilisation de la croix-navigateur detectioin
Je vais envisager un JQuery alternative, mais je ne sais pas comment il va travailler sur la 3ème partie du site si ce site n'est pas de la bibliothèque JQuery.
Merci à tous.
C'est un bon point... n'y pense même pas. Je vais juste souligner le typique mises en garde et avertissements à quelqu'un en utilisant mon code.
OriginalL'auteur C King | 2011-12-09
Vous devez vous connecter pour publier un commentaire.
Je pensais essayer un non-jQuery (et non les autres-de la bibliothèque de la solution de trop, juste pour...eh bien, le remplissage de quelques minutes):
JS Fiddle démo.
Modifié ci-dessus, afin de détecter les
img
éléments imbriqués à l'intérieur d'una
élément (que je pense est ce que vous êtes désireux d'avoir re-lire votre question):JS Fiddle démo.
var tag = [];
au lieu devar tag = {};
? N'est-il pas mauvais de mettre propriétés dynamiques sur un tableau?Aussi pour dire que vous voulez probablement à vérifier pour
e.srcElement
si il n'y a pas de "cible" de la propriété sur l'événement.c'est peut-être, mais j'étais pas au courant de cette jusqu'à ce que votre commentaire (j'ai appris le JavaScript par accident, via jQuery...donc je peux l'utiliser (heureusement!), mais pas forcément "bien").
de sorte que deviendrait:
var target = e.target || e.srcElement;
? Je n'ai pas IE à jouer (je suis simplement un amateur, donc... hausse les épaules) pour trouver par moi-même, malheureusement =/OriginalL'auteur David Thomas
Pour appeler une fonction à chaque fois qu'un lien ajouté dynamiquement ou non—a été cliqué, l'utilisation sur()
Si vous utilisez une ancienne version de jQuery, alors vous devez utiliser délégué() (notez que la commande de sélecteur de type d'événement est allumé)
mon plaisir.
Je la renvoie -- maintenant, je dois aller changer tous mes live() appelle depuis qu'il est maintenant obsolète. Darn vous!
ha! J'ai l'habitude d'utiliser en direct avec brio, ne sachant pas que c'était déconseillé. Pour être honnête, le seul inconvénient avec le live, c'est qu'il passe au travers de votre dom au moment où il était appelé, et encapsule tous les liens (ou autre) qu'il trouve et crochets de l'événement. C'est que les premiers temps de traitement qui est ignoré délégué et sur. Sauf si vous avez une folle compliqué page, il ne sera probablement pas faire une différence. Il suffit de laisser 🙂
Une autre raison de passer une journée sur StackOverflow répondre à des questions de fait de vous un meilleur programmeur!
OriginalL'auteur Adam Rackis
C'est à peu près comment le faire sans utilisation de jQuery:
OriginalL'auteur user1090520
je l'utiliser de cette façon, il n'affecte que l'une des balises avec des liens,
Mais sur cette note vous dire que votre désir du peuple de l'utiliser sur 3ème partie de sites web, de sorte qu'ils pourraient ne pas avoir jQuery de sorte que vous pourriez avoir besoin de cette case en haut de votre fichier, mais alors vous aurez besoin d'inclure votre fichier après utilisation, le même code, mais à vérifier pour votre objet ou un nom de fonction
Oui et non, la page n'a pas besoin de recharger une fois la balise script contenant ce code a fini de se charger (télécharger) votre fichier jQuery
La raison du rejet sur le modifier, c'est quand ce message a été répondu à beaucoup de navigateurs qui ne supportent pas la
document.head
voir developer.mozilla.org/en-US/docs/Web/API/Document/... pour la prise en charge de compatibilitéOriginalL'auteur Martin Barker