问题 使用jQuery .click()(或类似)在href属性中触发javascript


不幸的是,我正在使用一些第三方javascript,它会在我的页面中插入链接。我不想直接使用这些链接,而是使用代理元素,当单击它们时,会触发第三方链接上的click事件。

第三方链接将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处理程序确实可以正常工作。


4632
2017-08-03 13:29


起源

不幸的是...... - Matt Ball
首先,你能检查语法吗? onclick="doSomething() 应该 onclick="doSomething()" - dugokontov
不能 href="javascript:doSomething" 是 href="javascript:doSomething()"? - Rocket Hazmat
修复 - 它们只是我的例子中的拼写错误,而不是真正的代码。 - Beejamin


答案:


这里接受的答案深入探讨了“为什么会这样”: 我是否可以调用jquery click()来跟随<a>链接,如果我还没有使用绑定或单击已绑定事件处理程序?。基本上,似乎你不能在链接上执行click(),因为浏览器不支持虚假点击。

一个解决方法

如果为这些情况设置location.href,它可以工作:

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

工作小提琴: http://jsfiddle.net/uv29x/3/

两种解决方法

你可以得到这些链接的href并做一个 eval() 在他们身上,对吗?


11
2017-08-03 13:38



我意识到这在安全性方面很糟糕,但是我认为设置有点迫使你去做。 - Milimetric
这就是我目前所采用的解决方法 - 它工作正常,但我真的很想了解发生了什么。 - Beejamin
这里接受的答案有点深入: stackoverflow.com/questions/1694595/...。基本上,似乎你做不到 click() 在链接上,因为浏览器不支持虚假点击。 - Milimetric
第三种解决方法: jsfiddle.net/FKaYR (注 <form> 进入文档,设置其行动)虽然它非常像改变 location.href 因此只能作为评论。 - Shadow Wizard
据我所知,从安全的角度来看,eval()并不比javascript:href属性差。任何能够将令人讨厌的内容传递给eval的人都可以轻松地重写href属性并以这种方式执行代码。我认为这两种方法都具有相同的权限。 - Beejamin


window.location 到了 href 值。

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

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


4
2017-08-03 13:45



有趣的方法!我可以看出为什么这样有效,但它比eval方法感觉更加狡猾。 - Beejamin
@Beejamin:不知道哪种方法更好,我只是想避免 eval。 - Rocket Hazmat
轻微 修改以适应所有三种类型的链接: jsfiddle.net/dmSUm/2 - Joseph Marikle


当我看到Milimetric的答案时,我刚刚打完这个。这是代码,无论如何它的价值 -

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

2
2017-08-03 13:45



谢谢 - 这是我在问这个问题之前采取的措施(我应该提到的)。我希望有人知道 为什么也是。 - Beejamin


使用原生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();
});

0
2017-12-10 02:56





如果我正确理解了这个问题,问题就是你有这样的事情:

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

并且你声称当javascript在href上时,onclick事件不会被触发。正确?如果是这样,我看到的是两个都被解雇,首先是onclick然后是href里面的javascript。


-1
2017-08-03 13:45



这根本不是问题。问题是他正试图触发 href 另一个JavaScript函数的动作。 - Rocket Hazmat
不 - 我正在使用的链接没有onclick,只有href中的javascript。以编程方式触发click事件时不会触发它。 - Beejamin
@Beejamin我明白你的意思了。 - Icarus