在 onclick 处理程序中修改目标 url答案

【问题标题】：Modify target url in onclick handler在 onclick 处理程序中修改目标 url
【发布时间】：2012-04-13 14:22:46
【问题描述】：

是否可以在 onclick 处理程序中修改目标 URL？怎么样？

我不想使用window.location = ... 之类的东西，因为它会改变浏览器的行为（单击与 ctrl-click、在新选项卡中打开、在特定窗口/框架中打开等...）。 我想要一个干净的解决方案 - 只需更改 url，其余的应该像往常一样自行完成。

$(...).click(function () {
    if (check_some_condition) 
        // modify target url here...
        // do not want to do window.location= - this is not clean
        // as it changes the browsers' behaviour (ctrl-click, opening in particular window/frame etc.)
    return true;
});

【问题讨论】：

好的，我的意思是干净而不是清晰......“本身”意味着不使用我的代码，“通常”意味着好像我没有处理点击事件。
这个问题对我来说很有意义。
在看老问题，这让我很感兴趣，你为什么要这么做？为什么不直接更改锚标记中的 href 属性？

标签： javascript jquery href

【解决方案1】：

试试

$(function(){
    $("#theLink").click(function(){
        $(this).attr("href","http://tnbelt.com");
    });
});

【讨论】：

恐怕这对已经运行的点击事件没有帮助。
是的，真的，解决方法就是这么简单！这也是 SKS 收敛到的 :-)
@TMS 那么，它对已经运行的点击事件有效吗？ SKS 代表什么？
@Magne，SKS 可能是在这里发布答案并更改昵称的人之一（现在不知道，可能是 Vega？）
@Magne 它似乎工作，至少在 Chrome 上。我写了一个vanilla JS 版本进行测试。

【解决方案2】：

编辑：更新代码，因为the event handler script is executed first and then the default action takes place。

添加以下版本以显示您可以使用.click，因为您没有注意到我与您分享的怪癖模式链接。 DEMO

$(document).ready (function () {
    $('#changeMe'). click (function (e) {
        var goLucky = Math.floor(Math.random()*12);
        if (goLucky % 2 == 0) {
            this.href = "http://www.google.com";
        } else {
            this.href = "http://www.hotmail.com";
        }
    });
});

评论e.preventDefault(); & $(this).click() 因为它不是必需的..

DEMO

$(document).ready (function () {
    $('#changeMe').one ('click', function (e) {
        //e.preventDefault();
        this.href = "http://www.google.com";
        //$(this).click();
    });
});

【讨论】：

在 jsFiddle 中输入这个然后看到你已经发布了。该死！
这使得第一次点击什么也不做（至少用户是这样看的）。我不认为这样的解决方案是可以接受的。
谢谢！不幸的是我不能使用.one() - 条件可能会来回变化......每次单击锚时都必须检查条件。
@Tomas 你不需要使用.one()。这只是一个示例。您仍然可以根据需要更改 href 和调用。原因是：quirksmode.org/js/events_early.html#link3
@freakish，你的答案在哪里？我想检查您的解决方案，因为我不能使用.one()。现在我看到它消失了！

【解决方案3】：

让我们考虑一个隐藏的锚标签

<a id="linkId" href="myPageToGo.html" class="thickbox" title="" style="visibility:hidden;">Link</a>

然后你可以在你的代码中模拟锚点点击...

$(...).click(function () {
    if (check_some_condition) 
        $('#linkId').click();
    return true;
});

编辑 - 替代方式

将点击的元素包裹在锚标签内...

$(...).click(function () {
    if (check_some_condition) 
        $(this).wrap('<a id="new1" />');
        $('#new1').click();
    return true;
});

【讨论】：

好把戏，反正浏览器条件（在同一个/新标签页、框架、窗口中打开）不会改变吗？
在普通链接上，浏览器会以某种方式决定新链接的打开位置（相同/新选项卡、框架、窗口）。这种解决方案不会改变行为吗？
使用 js 实现的任何解决方案都会改变这种行为，除非单击的元素是锚。
浏览器仅检测<a>标签的选项（相同/新标签、框架、窗口）...

【解决方案4】：

是的。

$(this).attr('href', 'http://example.com/');

【讨论】：

【解决方案5】：

很多答案，包括最重要的评论，都错过了重要的一点。如果用户只是右键单击 URL 以在新选项卡/窗口中打开，则此方法将不起作用，因为您直接在 'href' URL 指定的位置请求，而不是通过 onclick 事件。

您可以在 Gourneau 的帖子中提到的这个演示小提琴中尝试相同的操作。

http://jsfiddle.net/skram/PtNfD/7/

$(document).ready (function () {
    $('#changeMe').one ('click', function (e) {
        this.href = "http://www.google.com";
    });
});

【讨论】：