点击元素的innerHTML

8
如何使用收藏夹或脚本注入器获取随机网站页面上所点击元素的innerHTML?例如,点击此页面上“提问”按钮上方将返回以以下内容开头的结果:<div class="nav mainnavs " style=""> <ul style=""> <li style="">
我尝试编辑来自slayeroffice.com的一个旨在删除所选元素的子级的收藏夹,但它似乎不起作用。
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];
            }
        }
    }

}

有解决方案吗?
2个回答

20

你可以直接将事件附加到文档的 onclick 处理程序上,无需循环遍历页面上的每个元素。点击会冒泡到它...

document.onclick = function(event) {
    var target = event.target || event.srcElement;

    alert ( target.innerHTML ); 
};

然而,我建议使用更好的方法来附加事件处理程序,而不是使用"=",因为它会覆盖可能对页面操作至关重要的任何先前定义的事件。

我以前使用过这个片段来更好地附加事件而没有使用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);
            });
        }
    }

你只需打电话给...

bindEvent(document,'click', function(event) {
    var target = event.target || event.srcElement;

    alert ( target.innerHTML ); 
});

1
或者你可以直接使用 var target = event.target || event.srcElement; - epascarello
谢谢!这个完美地运行了,而且更简单;这比我所期望的还要多。 - Caramel Truffle
如何使用此函数将事件附加到特定元素?例如,bindEvent(“button”,'click',function(event){,仅将事件附加到按钮。 - Jagan K
@JaganK 你需要获取元素 document.getElementById('blah') 参见:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementById - Michael Coxon

3

在 for 循环中,变量 i 的作用域会出现问题。

当点击发生时,i 将等于 el.length

但是为什么要使用变量,当你可以直接读取它呢。

更改:

if ((t == e.target) || (window.event)) alert(d);

为了

if ((t == e.target) || (window.event)) {  
    alert(this.innerHTML);
}

此外,您不应该在window.event上检查srcElement吗?

谢谢,这正是我在尝试不同的代码修改时所想到的。可悲的是,它也表明最初的代码并不真正适合这个任务。 - Caramel Truffle

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接