Question

我有一个超链接，点击后会呈现一个弹出窗体。但是在弹出窗口渲染之前我想先验证一些数据。因此，在这种情况下，如果客户端名称已存在，请不要呈现弹出窗口以创建具有该名称的新客户端。所以在我的网页上我有;

<span id="buttonCreate" style="display: none;" class="bootstrapLink" 
                  data-itoc-check-name="@Url.Action("CheckClientName", "DataService")">Click "Create" if you want to use this name 
                <a href="#edit-client-popup" class="btn btn-info btn-xs create-client" data-toggle="modal">Create</a>
            </span>

在我的javascript中我有以下代码;

var popupUrl;
$('.create-client').click(function (event) {
    event.preventDefault();
    popupUrl = $(this).attr("href");
    var button = $('#buttonCreate');
    var clientName = getValue('clientName');
    var url = button.data('itoc-check-name');
    dataService.checkClientName(clientName, validateClientName, url);
});

var validateClientName = function (isInvalid) {
    if (isInvalid) {
        $("#errorMessageClientName").show();
        return false;
    }

    resetModalPopup();
    $("#editClientName").val(clientName);
    document.location.href = popupUrl;
    return true;
}

我希望event.preventDefault（）;会阻止弹出窗口渲染。如果验证通过，则document.location.href = popupUrl; 将呈现弹出窗口，否则如果验证失败则出现错误消息 - $（“＃errorMessageClientName”）。show（）; - 而是显示。但是event.preventDefault（）;不起作用，弹出窗口呈现。应该注意，validateClientName是一个回调函数，这可能是问题的一部分。在全局变量中设置事件并在回调函数中尝试event.stopPropagation（）不起作用。超链接中的data-toggle =“modal”属性是一个引导功能，在单击超链接时呈现模式弹出窗口。

那么我该如何解决这个问题呢？

Answer 1

如果这是一个弹出式方案，并且用户没有理由想要右键单击该链接以打开新标签页，则完全删除<a>标记。相反，

将其包裹在<span>
应用任何所需的样式，使其显示为链接
将网址存储在某种数据属性中，
通过将所需的功能绑定到a来模拟链接操作点击事件。

然后你不必阻止任何事情。另一个建议是包括event.stopPropagation()以及event.preventDefault()

Answer 2

这个答案不是100％理想，但我很满意。不要试图阻止弹出事件发生，而是关闭表单。所以回调函数看起来像这样;

var validateClientName = function (isInvalid) {
    if (isInvalid) {
        $("#errorMessageClientName").show();
        $('.modal').modal('hide');
    } else {
        $("#errorMessageClientName").hide();
    }
}

$（ '模态 '）模态（' 隐藏'）。是隐藏弹出窗口的行。因此，如果客户端名称已存在且验证失败，则表单将呈现一秒钟并再次关闭。不理想，所以如果有人有更好的答案我会打勾。与此同时，由于这个错误几乎不会发生，这个解决方案就可以了。

如何防止超链接弹出窗口

2 个答案: