【问题标题】：bootstrap tab click preventDefault not working引导选项卡单击 preventDefault 不起作用
【发布时间】：2018-07-16 13:25:44
【问题描述】：

我正在使用 bootstrap 3.3 并遵循选项卡的文档。

文档中给出的最简单的代码对我不起作用，我无法弄清楚原因。

$('#mainTabs a').click(function (e) {
            e.preventDefault()
            console.log('Clicked');
        });

当我使用时

show.bs.tab

事件，preventDefault 有效。但由于某种原因，点击没有。控制台正在打印“已单击”，但不会阻止选项卡更改。

基本上我正在尝试拦截标签更改，显示模式并根据用户输入，显示或不显示新标签。

请帮忙。

【问题讨论】：

很可能该事件不会传播到您匹配的元素，因此没有默认值可以防止

标签： javascript twitter-bootstrap-3 preventdefault bootstrap-tabs

【解决方案1】：

如果e.preventDefault(); 不起作用，您必须改用e.stopImmediatePropagation();。

欲了解更多信息，请查看：What's the difference between event.stopPropagation and event.preventDefault?

$("#mainTabs a").click(function(e) {
     e.stopImmediatePropagation();
});

如果您已将其他事件处理程序附加到链接，则应改为查看 e.stopPropagation() 和 e.stopImmediatePropagation()。请注意，return false 相当于同时调用event.preventDefault() 和event.stopPropagation()。

编辑 ==========

使用return false;。

【讨论】：

是的，这行得通。我也尝试使用 return false ，它也有效。非常感谢。
@StacyJ，如果你觉得合适，你能标记这个答案吗？

【解决方案2】：

遇到了同样的问题，由于未知的原因，prevent default 对 bootstrap 4 表单没有任何作用。这是bs团队的官方代码，稍作调整。

$(document).ready(function() {
    (function() {
        'use strict';
        window.addEventListener('load', function() {
            // Fetch all the forms we want to apply custom Bootstrap validation styles to
            var forms = document.getElementsByClassName('notificationForm');
            // Loop over them and prevent submission
            var validation = Array.prototype.filter.call(forms, function(form) {
                form.addEventListener('submit', function(event) {
                    if (!checkValidity()) {
                        console.log('did not validate');
                        event.preventDefault();
                        event.stopPropagation();
                    }
                    form.classList.add('was-validated');
                }, false);
            });
        }, false);
    })();
})

那么您需要一个 checkValidity 函数，该函数将根据您的验证返回 true 或 false。

如果您要验证复选框：

您可能正在验证一组复选标记，因为 bs 不支持，所以这是我的验证代码以防万一（这将确认 regionSelect div 中至少有 1 个复选框已被选中。

function checkValidity() {
    var regionsValidation = $('div.regionSelect :checkbox:checked').length;
    var categoriesValidation = $('div.categorySelect :checkbox:checked').length;
    if( (regionsValidation > 0) && (categoriesValidation > 0)) {
        return true;
    }
    else {
        return false;
    }
}

【讨论】：