為什么我使用Javascript添加到DOM的鏈接不是可點擊的？

Question

我正在編寫一個書簽來更改Google主頁的行為。 我喜歡視覺搜索頁面預覽功能。 最酷的東西。 但是我真的很想看看如果它作為實時搜索工作，而不是將鼠標懸停在鏈接上才能看到它會是什么樣子。

因此，需要執行一些步驟-我已經完成了部分功能。

這是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. 在Google上搜索內容
3. 點擊放大鏡
4. 點擊書簽

目前，由於某種原因-除非圖像預覽上有文本框，否則無法單擊添加到頁面的鏈接。 就我對DOM的理解而言， <a>標記的全部內容應可單擊。

有人知道是什么問題嗎？

我想找出的其他問題是如何在不要求用戶點擊的情況下自動查詢圖像。

完成此操作后，我將嘗試將整個事件變成事件偵聽器，該事件偵聽器將自動查詢並在搜索窗口中的keyup上顯示圖像。

那有多酷？ :)

我似乎無法在此處將小書簽“編譯”到堆棧中，但是我可以將其拖動到此處的工具欄中： 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）。

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

使用span元素而不是div元素，然后可以使用CSS樣式將鏈接和span元素同時設置為塊元素。