为什么没有链接我添加到DOM与Javascript可点击？ [英] Why aren't the links I'm adding to the DOM with Javascript clickable?
问题描述
我正在编写一个Bookmarklet来更改google主页的行为。我喜欢视觉搜索页面预览功能。 Coolest.thing.ever。 但是，我真的很想看看它是如何工作的一个实时搜索，而不是鼠标悬停链接看到它。
所以这里有几个步骤 - 我有部分功能工作。
这是JS代码。
javascript：（function（） {
c = document.getElementById（'ires'）;
nli = document.createElement（'div'）;
cell = 0;
for（var Obj在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 ）;
为（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）;
}）（）;
目前的工作方式是
- 将上述代码放入书签
- 在Google上搜索某些内容
- 点击放大镜
- 单击书签
目前，由于某些原因，添加到页面的链接不可点击，除非图像预览中有文本框。就我对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 = '左'; na.style.styleFloat = '左'; ND =使用document.createElement（ 'DIV'）; CLDIV =使用document.createElement（ 'DIV'）; cldiv.style.clear = '两者'; nd.style.width = google.vs.ha [的OBJ] .data.dim [0] +'PX '; nd.style.height = google.vs.ha [的OBJ] .data.dim [1] +' 像素 '; nd.style.margin =' 5像素 '; nd.style.padding =' 5像素'; ND。 style.border ='1px solid＃999999'; if（google.vs.ha [Obj] .data.tbts.length）{nilDiv = document。的createElement（ 'DIV'）;对于（i = 0; I< google.vs.ha [的OBJ] .data.tbts.length;我++）{盒= 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 + '像素'; newbox.style.height = box.h + '像素'; newbox.style.width = box.w + '像素'; 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 =' 相对 '; nilDiv.appendChild（newtext）;} nilDiv.style.height =' 0像素'; nd.appendChild（nilDiv）;}对于（I = 0; I< google.vs .ha [的OBJ] .data.ssegs.length;我++）{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）不能包含块元素（div）。
浏览器有不同的方法来处理这样的不正确的元素，但是它们会尝试使其具有某种意义。处理错误的一种方法是将块元素移动到内联元素之外，这当然意味着它不可点击。
使用span元素而不是div元素，然后您可以使用CSS样式将链接和跨度元素同时嵌入到块元素中。
I'm writing a Bookmarklet to change the behaviour of the google homepage. I love the visual search page preview functionality. Coolest.thing.ever. BUT I'd really like to see what it'd be like if it worked as a LIVE SEARCH as opposed to having to mouseover the links to see it.
So there are a few steps to this - I've got partial functionality working.
Here's the JS code.
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);
})();
The way it works at the moment is
- put the above code in a bookmark
- search for something on google
- click the magnifying glass
- click the bookmark
At the moment, for some reason - the links that get added to the page are not clickable unless there are text boxes on the image preview. As far as my understanding of DOM goes, the whole content of the <a> tag should be clickable.
Anyone know what the problem is?
Other questions I'd like to figure out is how to auto-query the images without requiring the user to click.
Once that's done I'll try to turn the whole thing into an event-listener which auto-queries and displays the images on keyup in the search window.
How cool will that be?! :)
I can't seem to get the bookmarklet to "compile" here on stack but I've got one you can drag into your toolbar here: http://chesser.ca/2010/11/google-visual-image-search-hack-marklet.
or the href should look like this
<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>
An inline element (a) can not contain a block element (div).
Browsers have different ways of handing incorrect elements like this, but they will try to make some kind of sense out of it. One way to handle the error is to move the block element outside the inline element, which of course means that it's not clickable.
Use span elements instead of div elements, then you can use CSS styles to chance both the link and the span elements into block elements.
这篇关于为什么没有链接我添加到DOM与Javascript可点击？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
