如何在 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”函数形式，因为它来自其他来源。在这种情况下，是否有一些方法可以找到调用元素？

- Kop4lyf

---

可能是重复的问题：在不将事件对象作为参数传递的情况下获取事件处理函数中的事件对象？（使用jQuery） - pwolaq

@Pawel_W：并非如此，href="javascript:..."和onclick="..."之间有很大的区别。 - T.J. Crowder

Answer 1

这里真正的答案是更改HTML，但你说你不能这样做。如果可以的话，我会反对这个想法。如果你正在编写函数，并且函数名称在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。

- T.J. Crowder

Answer 2

如果在加载完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="javascript:var x=1;handleEvent(1)">

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

- cregox

---

据我理解，Cawas，这个答案适用于简单的HTML，但是我当时遇到的HTML非常复杂。有100个元素没有任何class / id，看起来完全相同，但区别在于href事件。在这种情况下，我们无法使用.find来获取元素，因为我们不知道哪个元素调用了该函数。这就是我将其更改为onclick的原因，因为我可以轻松获取元素。 - Kop4lyf

Squarespace的灯箱并不简单，但它组织得很好。我想这只是不同的情况吧。在我的情况下，没有其他答案可行。 ;)（现在我看到我应该重新表达这个想法，并专注于这一点，谢谢） - cregox

完全同意！！！顺便说一下，我收到的HTML是Jaspersoft报告，如果你想看一下。 - Kop4lyf

很酷的东西。重新阅读你的评论，我有一个想法...即使唯一的提示是你在href上写的任何内容，你仍然可以使用它。更棒的部分是它变得自我提示！我会再次编辑答案。 - cregox

Answer 3

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

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

使用这种方式，您将不会对内联的href事件执行任何操作，只需添加自己的处理程序。

- Joe

---

这个答案在多个层面上都是错误的：添加监听器并不能让另一段事件处理代码神奇地消失。这也不会将处理程序绑定到所有元素，而只会绑定到DOM的第一个锚点元素。querySelectorAll也比一些新的getElementsBy*函数（例如getElementsByClassName）更好地得到支持，尽可能使用它。此外，最好指定传递给addEventListener的第三个参数。 - Elias Van Ootegem

@EliasVanOotegem 你评论中的几点：1）我从未说过添加事件侦听器会使内联声明消失。我明确表示OP将简单地忽略内联声明。2）OP说他有一个锚元素；因此索引为0。显然，如果他想绑定所有锚点，那么这将是一个不同的过程。3）更新使用querySelectorAll。 - Joe

不，你不会忽略内联href。 - Elias Van Ootegem

Answer 4

尝试像这样使用jQuery，选择您的选择器中的链接标签即可。

只需使用您的选择器选择链接标签即可。

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

这只是一种解决方法的临时措施。

- rajesh kakawat

---

onclick和href不是等价的。href可以使用键盘，而onclick只能使用鼠标。 - ceving