如何防止超链接弹出

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" 属性是一个 bootstrap 功能，它在单击超链接时呈现模式弹出窗口。

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

Answer 1

如果这是一个弹出式场景，并且用户没有理由想要右键单击 link 打开一个新选项卡，那么请完全删除 <a> 标签。相反，

将其包装在 <span>
应用任何想要的样式，使其看起来像 link 应该
将 URL 存储在某种数据属性中，并且
通过将所需函数绑定到一个来模拟 link 操作点击事件。

那你就什么都不用阻止了。另一个建议是包括 event.stopPropagation() 以及 event.preventDefault()

Answer 2

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

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

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

如何防止超链接弹出

How to prevent a popup from a hyperlink

jquery

popup

twitter-bootstrap