从点击处理程序中触发点击答案

【问题标题】：Trigger click from within click handler从点击处理程序中触发点击
【发布时间】：2014-03-12 09:38:00
【问题描述】：

我正在尝试从同一链接的单击处理程序中触发链接上的单击事件。我想停止链接导航，直到用户收到某些操作的通知。操作完成后，链接应正常导航。

请看下面的测试用例。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
        <script language="javascript" type="text/javascript">
            $(function () {
                $("#test").click(function (e) {
                    var lnk = $(this);

                    if (lnk.data("checked") != true) {

                        var notice = $('<a href="#">Continue</a>');
                        $('body').append(notice);

                        notice.click(function (e) {
                            lnk.data("checked", true);
                            lnk.click();

                            return false;
                        });

                        return false;
                    }

                    alert("should navigate now");
                });
            });
        </script>

        <a id="test" href="http://www.google.com">Test</a>

    </body>
</html>

此示例的预期行为是；

点击测试
出现继续
继续点击
页面导航到'Test'的href

相反，当单击继续时，会显示“现在应该导航”警报，但浏览器不执行任何操作。

【问题讨论】：

手动触发点击事件可能不会触发元素的默认行为
检查lnk.data("checked")的类型，可以认为不是falsy
@ArunPJohny 你有这方面的参考吗？
@u_mulder 这就是我检查!= true 的原因，它涵盖了null、""、undefined、false 或除true 之外的任何内容：)

标签： jquery

【解决方案1】：

尝试使用 dom 元素触发点击

   notice.click(function (e) {
       lnk.data("checked", true);
       lnk[0].click();
       // ^^^^
       return false;
   });

DEMO

【讨论】：

这行得通。你知道为什么吗？大概 jquery 正在干扰，它是否有某种“潜在的无限循环”检查？
@Alex 我不确定为什么 jQuery 不允许链接的默认行为，但我认为这是有意的。
@Alex 在这里找到了一些信息 stackoverflow.com/a/5867423/1696560 You can only trigger a click that jQuery has created. It's one of jQuery's cute little quirks.

【解决方案2】：

只需在警报后添加document.location.href = lnk.attr('href');。

我认为，问题出现了，因为警报中断回调。

【讨论】：

【解决方案3】：

不确定这是您想要的，但请尝试像这样重写您的代码：

$(function () {
    $("#test").click(function (e) {
        e.preventDefault();
        if ($(this).data("checked") != true) {
            var notice = $('<a class="link" href="#">Continue</a>');
            $('body').append(notice);
        }
        alert("should navigate now");
    });

    $(document).on('click', '.link', function (e) {
        $("#test").data("checked", true);
        window.location = $("#test").attr('href');   
    });
});

【讨论】：

【解决方案4】：

我知道这已经过时了，但我想从现在开始为那些找到这个问题和答案的人做出贡献。

如果您尝试确认用户是否要离开网站，请考虑使用window.onbeforeunload 事件处理程序。您可以将字符串消息放入类似警报的消息框中呈现给用户。

<script>
window.onbeforeunload = function (e) {
    e = e || window.event;

    // For IE and Firefox prior to version 4
    if (e) {
        e.returnValue = 'Sure?';
    }

    // For Safari
    return 'Sure?';
};
</script>

在这里查看第一个答案： Confirmation before closing of tab/browser

【讨论】：