Pourquoi les liens que j'ajoute sur le DOM ne sont-ils pas cliquables?

Question

J'écris un Bookmarklet pour changer le comportement de la page d'accueil google. J'aime la fonctionnalité de prévisualisation de la page de recherche visuelle. Coolest.thing.ever. MAIS Je voudrais vraiment voir ce que ce serait comme si cela fonctionnait comme une recherche en direct, par opposition à avoir à passer la souris sur les liens pour le voir.

Donc, il y a quelques étapes à cela - j'ai des fonctionnalités partielles qui fonctionnent.

Voici le code JS.

javascript: (function() { 
    c = document.getElementById('ires'); 
    nli = document.createElement('div'); 

    cell = 0; 
    for (var Obj in google.vs.ha) { 
     na = document.createElement('a'); 
     na.href = Obj; 
     na.style.cssFloat = 'left'; 
     na.style.styleFloat = 'left'; 

     nd = document.createElement('div'); 
     cldiv = document.createElement('div'); 
     cldiv.style.clear = 'both'; 
     nd.style.width = google.vs.ha[Obj].data.dim[0] + 'px'; 
     nd.style.height = google.vs.ha[Obj].data.dim[1] + 'px'; 
     nd.style.margin = '5px'; 
     nd.style.padding = '5px'; 
     nd.style.border = '1px solid #999999'; 


     if (google.vs.ha[Obj].data.tbts.length) { 
      nilDiv = document.createElement('div'); 
      for (i = 0; i < google.vs.ha[Obj].data.tbts.length; i++) { 
       box = google.vs.ha[Obj].data.tbts[i].box; 
       newbox = document.createElement('div'); 
       newbox.className = 'vsb vsbb'; 
       newbox.style.position = 'relative'; 
       newbox.style.top = (box.t) + 'px'; 
       newbox.style.left = box.l + 'px'; 
       newbox.style.height = box.h + 'px'; 
       newbox.style.width = box.w + 'px'; 
       nilDiv.appendChild(newbox); 
       newtext = document.createElement('div'); 
       newtext.className = 'vsb vstb'; 
       newtext.innerHTML = google.vs.ha[Obj].data.tbts[i].txt; 
       newtext.style.top = (box.t) + 'px'; 
       newtext.style.position = 'relative'; 
       nilDiv.appendChild(newtext); 
      } 
      nilDiv.style.height = '0px'; 
      nd.appendChild(nilDiv); 
     } 

     for (i = 0; i < google.vs.ha[Obj].data.ssegs.length; i++) { 
      ni = document.createElement('img'); 
      ni.src += google.vs.ha[Obj].data.ssegs[i]; 
      ni.className += ' vsi'; 
      nd.appendChild(ni); 
     } 
     na.appendChild(nd); 
     nli.appendChild(na); 
    }; 
    c.insertBefore(nli, c.firstChild); 
})(); 

La façon dont il fonctionne au moment est

1. mettre le code ci-dessus dans un signet
2. recherche de quelque chose sur google
3. cliquez sur la loupe
4. cliquez sur le signet

Pour le moment, pour une raison quelconque - les liens qui s'ajoutent à la page ne peut pas être cliquée sauf s'il y a des zones de texte dans l'aperçu de l'image. Dans la mesure où ma compréhension de DOM va, tout le contenu de la balise <a> devrait être cliquable.

Quelqu'un sait quel est le problème?

D'autres questions que je voudrais comprendre est de savoir comment interroger les images sans avoir à cliquer sur l'utilisateur. Une fois cela fait, je vais essayer de tout transformer en un écouteur d'événements qui interroge automatiquement et affiche les images au clavier dans la fenêtre de recherche.

À quel point cela sera-t-il cool ?! :)

Je ne peux pas sembler obtenir le bookmarklet pour "compiler" ici sur la pile mais j'en ai un que vous pouvez faire glisser dans votre barre d'outils ici: http://chesser.ca/2010/11/google-visual-image-search-hack-marklet.

ou le href devrait ressembler à ceci

<a href="javascript:(function(){c=document.getElementById('ires');nli=document.createElement('div');cell=0;for(var Obj in google.vs.ha){na=document.createElement('a');na.href=Obj;na.style.cssFloat='left';na.style.styleFloat='left';nd=document.createElement('div');cldiv=document.createElement('div');cldiv.style.clear='both';nd.style.width=google.vs.ha[Obj].data.dim[0]+'px';nd.style.height=google.vs.ha[Obj].data.dim[1]+'px';nd.style.margin='5px';nd.style.padding='5px';nd.style.border='1px solid #999999';if(google.vs.ha[Obj].data.tbts.length){nilDiv=document.createElement('div');for(i=0;i<google.vs.ha[Obj].data.tbts.length;i++){box=google.vs.ha[Obj].data.tbts[i].box;newbox=document.createElement('div');newbox.className='vsb vsbb';newbox.style.position='relative';newbox.style.top=(box.t)+'px';newbox.style.left=box.l+'px';newbox.style.height=box.h+'px';newbox.style.width=box.w+'px';nilDiv.appendChild(newbox);newtext=document.createElement('div');newtext.className='vsb vstb';newtext.innerHTML=google.vs.ha[Obj].data.tbts[i].txt;newtext.style.top=(box.t)+'px';newtext.style.position='relative';nilDiv.appendChild(newtext);}nilDiv.style.height='0px';nd.appendChild(nilDiv);}for(i=0;i<google.vs.ha[Obj].data.ssegs.length;i++){ni=document.createElement('img');ni.src+=google.vs.ha[Obj].data.ssegs[i];ni.className+=' vsi';nd.appendChild(ni);}na.appendChild(nd);nli.appendChild(na);};c.insertBefore(nli,c.firstChild);})();">bookmarklet</a> 

Answer 1

Un élément en ligne (a) ne peut pas contenir un élément de bloc (div).

Les navigateurs ont différentes manières de manipuler des éléments incorrects comme celui-ci, mais ils essaieront d'en tirer un certain sens. Une façon de gérer l'erreur est de déplacer l'élément block en dehors de l'élément inline, ce qui signifie bien sûr qu'il n'est pas cliquable.

Utilisez des éléments span à la place des éléments div, vous pouvez alors utiliser les styles CSS pour que les éléments de liaison et d'étendue deviennent des éléments de bloc.