爲什麼不是我用JavaScript點擊添加到DOM的鏈接？

Question

我正在寫一個Bookmarklet來改變google主頁的行爲。我喜歡視覺搜索頁面預覽功能。 Coolest.thing.ever。 但是我真的很想看看它是如何作爲實時搜索使用的，而不是將鼠標懸停在鏈接上才能看到它。

所以有幾個步驟 - 我已經部分功能工作。

這裏是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); 
})(); 

它工作在目前的方法是

1. 把上面的代碼中書籤
2. 搜索對谷歌
3. 東西點擊放大鏡
4. 點擊書籤

目前，出於某種原因 - 添加到的鏈接除非圖像預覽中有文本框，否則該頁面不可點擊。就我對DOM的理解而言，<a>標籤的全部內容應該是可點擊的。

任何人都知道問題是什麼？

我想弄清楚的其他問題是如何在不需要用戶點擊的情況下自動查詢圖像。

一旦完成，我會嘗試將整個事情變成一個事件偵聽器，它可以在搜索窗口中自動查詢和顯示圖像。

那會是多酷？！ :)

我似乎無法得到書籤在這裏「編譯」在堆棧，但我有一個你可以拖動到您的工具欄在這裏：http://chesser.ca/2010/11/google-visual-image-search-hack-marklet。

或在href應該是這樣的

<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

內聯元件的（a）不能包含塊元素（DIV）。

瀏覽器有不同的方式來處理不正確的元素，但他們會嘗試從中獲得某種感覺。處理錯誤的一種方法是將塊元素移到內聯元素之外，這當然意味着它不可點擊。

使用span元素而不是div元素，然後您可以使用CSS樣式將鏈接和span元素都放入塊元素中。