J'utilise l'API de recherche Google et je souhaite que lorsque vous cliquez sur une image, cette image soit copiée vers un autre emplacement.

J'ai créé un violon ici: http://fiddle.jshell.net/wjewg062/ Cela fonctionne de cette façon: l'utilisateur tape un terme dans le champ de saisie et les images seront affichées. Quand il / elle cliquera sur un deux fois, il s'affichera dans le div image.

J'ai mis l'écouteur d'événement onClick sur le div searchresults, d'où le clic supplémentaire au début. Cependant, je veux qu'il soit affiché au premier clic.

Maintenant, si je commente cela

var searchresults = document.getElementById('searchresults');
searchresults.addEventListener("click", function(event){
  event.preventDefault();
  imageing();
});

Ça ne marche pas. Les images seront des liens. Je pense que la raison en est que les résultats sont affichés dans gs-image-box et n'ont pas encore été créés. J'ai essayé d'appeler la fonction imaging dans différentes autres fonctions comme le searchImg ou le OnLoad mais rien ne fonctionne.

J'ai pensé à utiliser une fonction de vérification si l'élément est cliqué décrit ici Détecter si je clique sur un élément dans un élément

Mais je pense qu'il doit y avoir un moyen plus simple.

Je suis à court d'idées, quelqu'un peut-il donner une idée ou un indice?

Merci !

2
Tom 16 juil. 2015 à 21:49

2 réponses

Meilleure réponse

Les informations dont vous avez besoin se trouvent déjà dans vos résultats de recherche eventListener. Le target de ce event sera l'image sur laquelle vous cliquez, même si vous ajoutez l'événement sur un div plus haut dans la structure.

Un javascript event sera par défaut envoyé depuis l'élément top (window) tout au long du element qui a reçu le clic, puis retournera en haut. Tout élément qui est un ancêtre de l'élément sur lequel l'utilisateur a cliqué recevra les informations sur l'événement, vous pouvez donc écouter sur n'importe quel ancestor, mais la cible reste l'élément sur lequel l'utilisateur a réellement cliqué.

Dans votre cas, en passant simplement la cible à votre fonction imageing(), vous pouvez appliquer les comportements que vous souhaitez sans aucune manipulation supplémentaire.

Un problème auquel vous pourriez être confronté est si l’utilisateur clique sur searchresult mais pas sur un élément img. Ensuite, vous aurez un bogue, vous devriez donc gérer ces cas.

Quelque chose comme ça:

var searchresults = document.getElementById('searchresults');
 searchresults.addEventListener("click", function (event) {
     console.log(event.target, this);
     event.preventDefault();
     if(event.target.tagName == 'IMG'){
         imageing(event.target);
     }
 });

function imageing(targetImg) {
     var imageresult = document.getElementsByClassName('gs-image-box');

     var xu = document.getElementById('companylogo');
     var imgsrc = targetImg.src;
     xu.src = imgsrc;

 }

http://fiddle.jshell.net/pwjLrfnt/3/

1
Julien Grégoire 16 juil. 2015 à 21:25

Les images sont créées dynamiquement, non? Consultez ce post Liaison d'événements sur des éléments créés dynamiquement?

En bref, les événements sont attachés aux éléments lors du chargement de la page. Ainsi, un élément dynamique nouvellement créé, tel que celui créé par Google, n'est pas associé à l'événement. donc google a probablement un moyen de contourner le tout "vous devez charger la page pour attacher des événements aux éléments" mais cela nécessite un clic supplémentaire. L'utilisation de la syntaxe trouvée dans l'article devrait vous aider.

Au fait. L'utilisation de Jquery ne montre pas vraiment votre site car il est généralement mis en cache dans le navigateur du client.

2
Community 23 mai 2017 à 12:10