javascript 单击元素的innerHTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16611012/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
innerHTML of clicked element
提问by Caramel Truffle
How could I get the innerHTML of a clicked element on a page of a random website, using a favelet or a script injector?
By example, clicking right above the "Ask Question" of this page would return something starting with: <div class="nav mainnavs " style="">
<ul style="">
<li style="">.
如何使用 favelet 或脚本注入器获取随机网站页面上单击元素的 innerHTML？例如，单击此页面的“提问”正上方将返回以： 开头的内容<div class="nav mainnavs " style="">
<ul style="">
<li style="">。
I tried editing a favelet from slayeroffice.com whose initial purpose was removing children of the selected element, but it doesn't seems to work.
我尝试从 slayeroffice.com 编辑一个 favelet，其最初的目的是删除所选元素的子元素，但它似乎不起作用。
javascript:
var b = new Array();
var c= 1;
var d;
document.onkeydown = ck;
el = document.getElementsByTagName('*');
for (i = 0; i < el.length; i++)
{
if (el[i].tagName.search(/(HTML|BODY)/i) == -1)
{
if (el[i].title) el[i].oldTitle = el[i].title;
el[i].title = el[i].innerHTML;
d=String(el[i].innerHTML);
el[i].onclick = function(e)
{
t = this;
if (window.event) e = window.event;
if ((t == e.target) || (window.event)) alert(d);
if (window.opera) e.stopPropagation();
return false;
};
el[i].onmouseover = function()
{
if (!c) return;
c = 0;
t = this;
b[t] = t.style.backgroundColor;
t.style.background = '#DADADA';
};
void(
el[i].onmouseout = function()
{
t = this;
t.style.backgroundColor = b[t];
c = 1;
});
}
}
function ck(e)
{
k = window.event ? window.event.keyCode : e.keyCode;
if (k == 27)
{
for (i = 0; i < el.length; i++) {
if (el[i].tagName.search(/(HTML|BODY)/i) == -1)
{
el[i].oldTitle ? el[i].title = el[i].oldTitle : el[i].removeAttribute('title');
el[i].onclick = null;
el[i].onmouseover = null;
el[i].onmouseout = null;
el[i].style.backgroundColor = b[t];
}
}
}
}
Is there any solution?
有什么解决办法吗？
回答by Michael Coxon
You can just attach an event to the document onclick handler. No need for looping through every element on the page. Clicks will bubble up to it...
您可以将事件附加到文档 onclick 处理程序。无需遍历页面上的每个元素。点击会冒泡到它...
document.onclick = function(event) {
var target = event.target || event.srcElement;
alert ( target.innerHTML );
};
However I recommend using a better method for attaching the event handler than with '=' as it will override any previously defined events that may be crucial to page operation.
但是，我建议使用比使用 '=' 更好的方法来附加事件处理程序，因为它会覆盖任何先前定义的对页面操作可能至关重要的事件。
I have used this snippet before for better event attaching without jQuery...
我之前使用过这个片段来更好地附加事件而不使用 jQuery ...
var bindEvent = function(elem ,evt,cb) {
//see if the addEventListener function exists on the element
if ( elem.addEventListener ) {
elem.addEventListener(evt,cb,false);
//if addEventListener is not present, see if this is an IE browser
} else if ( elem.attachEvent ) {
//prefix the event type with "on"
elem.attachEvent('on' + evt, function(){
/* use call to simulate addEventListener
* This will make sure the callback gets the element for "this"
* and will ensure the function's first argument is the event object
*/
cb.call(event.srcElement,event);
});
}
}
You just call...
你只要打电话...
bindEvent(document,'click', function(event) {
var target = event.target || event.srcElement;
alert ( target.innerHTML );
});
回答by epascarello
You will have issues with the scope of iin a for loop.
您将i遇到 for 循环中的范围问题。
iwill be equal to el.lengthwhen the clicking happens.
i将等于el.length点击发生时。
But why use a variable, when you can read it
但是为什么要使用变量，当您可以读取它时
change
改变
if ((t == e.target) || (window.event)) alert(d);
to
到
if ((t == e.target) || (window.event)) {
alert(this.innerHTML);
}
Also shouldn't you be checking for srcElement on window.event?
你也不应该在 window.event 上检查 srcElement 吗？
