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

Question

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

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

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

当我使用

show.bs.tab

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

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

请帮助。

Answer 1

如果<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/empty" android:orientation="vertical" android:weightSum="3" tools:context=".story_activity"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="5dp" android:text="Story Name" android:textAlignment="center" android:textColor="#fff" android:textSize="20sp" android:textStyle="bold" /> /> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_marginBottom="15dp" android:layout_marginLeft="15dp" android:layout_marginRight="10dp" android:layout_marginTop="5dp" android:layout_weight="3" android:alpha="0.8" android:background="@drawable/story_des" android:orientation="vertical" android:weightSum="3"> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:orientation="vertical"> <ImageView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:src="@drawable/lion" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1.2" android:orientation="vertical" android:weightSum="0.2"> <TextView android:id="@+id/story_content" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="10dp" android:scrollbars="vertical" android:text="This specification does not indicate the behavior, rendering or otherwise, of space characters other than those explicitly identified here as white space characters. For this reason, authors should use appropriate elements and styles to achieve visual formatting effects that involve white space, rather than space characters.This specification does not indicate the behavior, rendering or otherwise, of space characters other than those explicitly identified here as white space characters. For this reason, authors should use appropriate elements and styles to achieve visual formatting effects that involve white space, rather than space characters.This specification does not indicate the behavior, rendering or otherwise, of space characters other than those explicitly identified here as white space characters. For this reason, authors should use appropriate elements and styles to achieve visual formatting effects that involve white space, rather than space characters." android:textColor="#fff" android:textSize="15sp" /> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="-10dp" android:layout_weight="0.3" android:orientation="horizontal"> <TextView android:id="@+id/story_rate" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginLeft="5dp" android:padding="5dp" android:text="Rate This Story" android:textColor="#1e5aaa" android:textSize="15sp" android:textStyle="bold" /> <ImageView android:id="@+id/rate" android:layout_width="30dp" android:layout_height="30dp" android:layout_gravity="center" android:layout_toRightOf="@+id/story_rate" android:src="@drawable/star" /> <ImageView android:id="@+id/rate1" android:layout_width="30dp" android:layout_height="30dp" android:layout_gravity="center" android:layout_toRightOf="@+id/rate" android:src="@drawable/star" /> <ImageView android:id="@+id/rate2" android:layout_width="30dp" android:layout_height="30dp" android:layout_gravity="center" android:layout_toRightOf="@+id/rate1" android:src="@drawable/star" /> <ImageView android:id="@+id/rate3" android:layout_width="30dp" android:layout_height="30dp" android:layout_gravity="center" android:layout_toRightOf="@+id/rate2" android:src="@drawable/star" /> </LinearLayout> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="0.7" android:orientation="vertical"> <ImageView android:layout_width="match_parent" android:layout_height="30dp" android:src="@drawable/line" /> <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="10dp"> <ImageView android:id="@+id/author_image" android:layout_width="80dp" android:layout_height="60dp" android:layout_marginBottom="20dp" android:layout_marginLeft="20dp" android:src="@drawable/as" /> <TextView android:id="@+id/author_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="2dp" android:layout_toRightOf="@+id/author_image" android:fontFamily="century-gothic" android:text="Author Title" android:textColor="#fff" android:textSize="15dp" android:textStyle="bold" /> <TextView android:id="@+id/pub_content" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/author_title" android:layout_marginLeft="2dp" android:layout_marginTop="3dp" android:layout_toRightOf="@+id/author_image" android:fontFamily="century-gothic" android:text="Pve sentences, cjajsxa " android:textColor="#fff" android:textSize="15dp" android:textStyle="bold" /> </RelativeLayout> </LinearLayout> </LinearLayout> </LinearLayout>不起作用，则必须改用e.preventDefault();。

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

e.stopImmediatePropagation();

如果您已将其他事件处理程序附加到链接，则应查看$("#mainTabs a").click(function(e) { e.stopImmediatePropagation(); });和e.stopPropagation()。请注意，return false等同于调用e.stopImmediatePropagation()和event.preventDefault()。

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

使用event.stopPropagation()。

Answer 2

有同样的问题，由于未知的原因，阻止默认值对引导程序 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;
    }
}

引导程序标签，单击preventDefault不起作用

2 个答案:

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