使用jQuery的.click()（或类似方法）触发href属性中的JavaScript。

Question

很不幸，我正在使用一些第三方JavaScript，它会在我的页面中插入链接。我想使用代理元素来代替直接使用这些链接，当点击代理元素时，会触发第三方链接的点击事件。

第三方链接将JavaScript打包到href属性中，就像这样:

<a id="horribleLink" href="javascript:doSomething()">Click me</a>

我的代理元素长这样：

<button rel="horribleLink" class="linkProxy">No, click me</button>

这里有一些使用jQuery编写的javascript代码，用于将它们连接在一起：

$('button.linkProxy').click(function(){
    $('#' + $(this).attr('rel')).click();
});

如果第三方链接是一个标准链接 (<a id="horribleLink" href="http://www.google.com">Click</a>) 或者稍微好一点的 onclick (<a href="#" id="horribleLink" onclick="doSomething()">Click</a>)，那么这个方法完全可行。但是当 JavaScript 在 href 属性中时，触发“click”将毫无作用。

有人能告诉我为什么吗？是否有合理的解决方法？

更新：正如 Millimetric 所说，根本原因似乎是浏览器防止在锚点上“伪造点击” - 我已经删除了我的“标准链接”示例，因为那是另一种不起作用的情况。然而，onclick 处理程序确实像你期望的那样工作。

- Ben Hull

---

首先，您能检查一下语法吗？onclick="doSomething() 应该是 onclick="doSomething()"。 - dugokontov

应该把 href="javascript:doSomething" 改为 href="javascript:doSomething()" 吧？ - gen_Eric

已修复 - 它们只是我的示例中的拼写错误，而不是真正的代码。 - Ben Hull

Answer 1

这里的被接受的答案深入解释了"为什么会出现这种情况":如果我没有使用bind或click绑定事件处理程序，我能否调用jquery click()来跟随<a>链接？。基本上，似乎你不能在链接上执行click()，因为浏览器不支持虚拟点击。

一个解决方法:

如果针对这些情况设置location.href，它就能起作用：

$('button.linkProxy').click(function(){
    location.href = $('#' + $(this).attr('rel')).attr('href');
});

可工作的示例：http://jsfiddle.net/uv29x/3/

两个解决方法：

你可以获取这些链接的href，并对它们进行eval()，对吧？

- Milimetric

---

接受的答案在这里稍微深入讨论了一下：https://dev59.com/Z3I-5IYBdhLWcg3wwLS3。基本上，似乎你不能在链接上执行 click() ，因为浏览器不支持虚拟点击。 - Milimetric

我接受这个答案，主要是因为上面的评论。我认为我仍然会使用eval而不是location.href，但两种解决方法都同样好（坏/丑）！感谢你的帮助！ - Ben Hull

第三种解决方法：http://jsfiddle.net/FKaYR/ （将<form>注入文档中，设置其操作），虽然它非常类似于更改location.href，因此只作为注释提供。 - Shadow The Spring Wizard

据我所知，就安全性而言，eval() 方法和 javascript: href 属性没有什么区别。任何可以传递恶意代码给 eval() 的人也可以轻松地重新编写 href 属性以此执行他们的代码。我认为这两种方法具有相同的权限。 - Ben Hull

奇怪，小把戏以前还能用 :) 你应该用示例代码创建一个新的并编辑答案。这就是维基的用途！ - Milimetric

Answer 2

将window.location设置为href值。

$('button.linkProxy').click(function(){
    window.location = $('#'+$(this).attr('rel')).attr('href');
});

DEMO: http://jsfiddle.net/dmSUm/

- gen_Eric

---

有趣的方法！我能理解为什么它有效，但对我来说感觉比eval方法更不舒服。 - Ben Hull

@Beejamin：不知道哪种方法更好，我只是喜欢避免使用 eval。 - gen_Eric

稍作 修改以适应所有三种链接类型：http://jsfiddle.net/dmSUm/2/ - Joseph Marikle

Answer 3

当我看到Milimetric的答案时，我刚好完成了这篇文章。无论如何，以下是代码：

eval($('#horribleLink').attr('href').replace('javascript:',''));

- ipr101

---

谢谢 - 这是我在提问之前已经尝试过的方法（我可能应该提一下）。我希望有人也知道其中的原因。 - Ben Hull

Answer 4

使用本地JavaScript click方法，您就可以获得一个可工作的点击！

$('button.linkProxy').click(function(){
    $('#' + $(this).attr('rel')).click()[0].click();
});

我一直使用jQuery的click，假设JavaScript的click会绕过jQuery的trigger，因此您需要保留两者。否则，如果我错了（或者您不需要考虑trigger），则可以简化为：

$('button.linkProxy').click(function(){
    $('#' + $(this).attr('rel'))[0].click();
});

- Nathan J.B.

Answer 5

如果我理解正确这个问题，您的困难是您遇到了这样一个情况：

 <a href="javascript:alert('hello');" onclick="javascript:alert('clicked');">Test</a>

你说当javascript在href中时，onclick事件不会被触发。是这样吗？如果是的话，我看到的是两个都被触发了，首先是onclick，然后是href内部的javascript。

- Icarus

---

这根本不是问题。问题是他试图从另一个JavaScript函数触发href动作。 - gen_Eric

不，我正在处理的链接没有onclick，只有在href内部的javascript。当以编程方式触发单击事件时，它不会触发。 - Ben Hull

@Beejamin 我明白你的意思。 - Icarus