如何在href javascript函数中获取调用元素？

Question

我在html中有一个锚标记元素，如：

<a href="javascript:handleEvent(this, 'abc')"></a>

现在在javascript函数中，我写了：

function handleEvent(sourceElement, txt) {
    console.log(sourceElement);
}

在这种情况下，安慰元素将成为窗口。 我尝试了sourceElement.document.activeElement，但它似乎不适用于chrome，它将作为body元素出现。

我无法将锚标记的结构更改为'onClick'函数，因为这来自其他一些来源。 有没有办法在这种情况下找到调用元素？

Answer 1

这里真正的答案是改变HTML，你说你做不到。 如果可以的话，我会继续努力。 如果您正在编写该函数，并且函数名称在HTML中，那么您如何才能更改HTML？

但如果你真的，真的不能，你可以在加载后更新DOM：

var list = document.querySelectorAll('a[href^="javascript:"]');
var x, link;
for (x = 0; x < list.length; ++x) {
    link = list[x];
    link.onclick = new Function(link.href.substring(11));
    link.href = "javascript:;";
}

实时复制 | 直播源

这是相当顽皮的，因为它使用Function构造函数（非常类似于eval ），但是如果您信任HTML的来源，那应该没问题。

或者当然，如果您不必使用href任何内容，只需在上面的代码中挂接您的事件处理程序，而不要使用new Function 。

Answer 2

如果你有权访问js，你可以这样做：

document.addEventListener('DOMContentLoaded', function(){
    var link = document.querySelectorAll('a');
    link[0].addEventListener('click', function(e){
        console.log(e.target);
    });
});

有了这个，你就不会对内联href事件做任何事情而只是附加你自己的处理程序。

Answer 3

尝试这样的东西，使用jQuery

只需使用选择器选择链接标记即可

        $(function(){
            var href = $('a').attr('href');
            href = href.replace('javascript:','');
            $('a').attr('href','#');
            $('a').attr('onclick',href);
        })

这只是解决方法。

Answer 4

如果这里没有其他答案适合你， 因为你加载后无法更新DOM（如果你想修改方形灯箱，请尝试做任何一个 - 不要说它是不可能的，但是......），这里有一个盒子思考：

有时会有一些暗示a href所在的东西。 所以你可以使用它。

<div class="hint current">
    <a href="javascript:handleEvent('.hint')">

就我而言，我甚至不需要参数即可知道提示，这使事情变得更简单：

function handleEvent (hint) {
    if(!hint) {
        hint = $("div.current");
    }
    hrefElement = $(hint).find('a[href^=javascript]');
}

如果你的DOM经常被你无法访问的脚本改变，那么这当然是有意义的。

但即使没有暗示a href ，你仍然可以这样做：

<a href="javascript:var x=1;handleEvent(1)">

function handleEvent (uniqueId) {
    hrefElement = $('a[href^=javascript:var x='+uniqueId);
}