bootstrap 选项卡单击阻止默认不起作用

Question

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

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

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

当我使用

show.bs.tab

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

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

请帮忙。

Answer 1

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

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

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

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

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

使用return false;.

Answer 2

有同样的问题，由于未知原因，防止默认对 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 函数，它将 return 真或假取决于你的验证。

如果您要验证复选框：

您可能正在验证一组复选标记，因为 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;
    }
}

bootstrap 选项卡单击阻止默认不起作用

bootstrap tab click preventDefault not working

javascript

preventdefault

bootstrap-tabs

twitter-bootstrap-3

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