Question

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

请参阅下面的测试用例。

<!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'

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

Answer 1

尝试使用dom元素触发点击

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

DEMO

Answer 2

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

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

Answer 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');   
    });
});

Answer 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

从单击处理程序中单击触发器

4 个答案: