bootstrap选项卡单击preventDefault不工作

Question

我使用的是bootstrap 3.3，并遵循选项卡的文档。

文档中给出的最简单的代码对我来说不起作用，我不知道为什么。

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

当我使用时

show.bs.tab

事件，preventDefault工作。但对于一个赛季来说，点击并不是。控制台正在打印"已单击"，但不会阻止选项卡更改。

基本上，我试图拦截选项卡的更改，显示模式，并根据用户输入，显示或不显示新的选项卡

请帮忙。

Answer 1

如果e.preventDefault();不工作，则必须使用e.stopImmediatePropagation();。

有关更多信息，请查看：event.stopPropagation和event.preventDefault之间有什么区别？

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

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

编辑=====

使用return false;。

Answer 2

也有同样的问题，由于未知的原因，prevent默认值对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不支持这一点，所以这是我的验证代码，以防万一(这将确认在regionSelectdiv中至少有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;
}
}