使用 preventDefault() 后以编程方式单击链接？答案

【问题标题】：Clicking a link programmatically after using preventDefault()?使用 preventDefault() 后以编程方式单击链接？
【发布时间】：2013-10-01 16:28:09
【问题描述】：

我正在尝试以编程方式更改 href 链接（根据 ajax 异步操作的结果）并在新窗口中打开它（我不想使用 window.open，因为它的行为类似于弹出窗口并且正在在 IE 中被阻止）。

以下代码只有在第二次手动点击链接后才能工作，我怎样才能让它在第一次点击时工作？

简化示例：

    <a href="http://demo.com" id="link">trying to change href link dynamically</a>

    <script type="text/javascript">
            document.getElementById('link').addEventListener("click", function (e) {

                if (!e.target.hasAttribute("target")) //only preventDefault for the first time..
            {
                    e.target.setAttribute("target", "_blank");
                    e.preventDefault();
                    updateLink();
                    }
            });

            function updateLink() {
// --HERE I PERFORM AN AJAX CALL WHICH TAKES A WHILE AND BY ITS RESULT I DECIDE WHICH URL TO USE - BUT HERE I JUST USE IT HARDCODED--
                document.getElementById('link').setAttribute("href", "http://google.com");
                document.getElementById('link').click();
            }

【问题讨论】：

长的代码块应该被jsfiddled
可能有点傻，但是你有没有试过简单调用click()函数两次？
你用的是哪个IE版本？
@Erik Christianson - 没有运气。贵宾犬 - 我使用 IE10。
你为什么不直接使用window.location.href = "<chosen url>"？

标签： javascript event-handling click dom-events preventdefault

【解决方案1】：

我在这个 jsFiddle 中组织了你的代码：http://jsfiddle.net/mswieboda/Hhj4D/

JavaScript：

var $link = document.getElementById('link');
$link.addEventListener("click", function (e) {
    if (!e.target.hasAttribute("target")) {
        //only preventDefault for the first time..
        e.target.setAttribute("target", "_blank");
        e.preventDefault();
        updateLink();
    }
});

function updateLink() {
    $link.setAttribute("href", "http://google.com");
    $link.click();
}

当我运行它时，这对我有用。悬停链接，您可以看到http://demo.com，但单击它会转到http://google.com。这是所需的功能吗？您绝对可以随时（在 AJAX 调用之后）使用 updateLink 函数来更改 href，此外，您也可以在该函数中设置 _target，这样对我来说更有意义。

【讨论】：