如何在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:;";
}

Live Copy | Live Source

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

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

Answer 2

尝试这样的事情，使用jQuery

只需使用选择器选择链接标签

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

这只是临时解决方案。

Answer 3

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

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

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

Answer 4

如果这里没有其他答案适合您因为您无法在加载后更新 DOM（如果您想修改 squarespace lightbox，请尝试执行其中任何一个 - 并不是说​​不可能，但是...），这是一个开箱即用的想法：

有时会有一些提示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);
}