jQUery preventDefault 或 stopPropagation() 不适用于切换表单

Question

我正在制作登录表单下拉菜单。当用户单击登录项时，将打开下拉表单。问题是一旦单击表单或其元素，它就会关闭。

我尝试了下面的代码，但没有工作

if ($('.auth').length) {
    $('.auth').click(function (event) {
        $(this).toggleClass('auth-active');
        $('.el-auth-box').toggle();
        //event.stopPropagation(); // not working
        event.preventDefault(); // not working
        //event.stopImmediatePropagation(); // not working
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="auth auth-active">
    <li class="auth-power">
        <i class="material-icons">power_settings_new</i>
        <ul class="el-auth-box" style="display: block;">
            <li class="el-auth-box-items">
                <form action="#" method="post">
                    <input dir="auto" name="emailhandle" placeholder="Email or Username" type="text">
                        <input dir="auto" name="password" placeholder="Password" type="password">
                            <div class="checkbox">
                                <input id="el-rememberme" name="remember" type="checkbox" value="1">
                                    <label for="el-rememberme">Remember</label>
                                </input>
                            </div>
                            <input name="csfr_code" type="hidden" value="0-1548314066-7814ce8b50bba9749389fdf8e76639a317c55c14">
                                <input class="el-form-tall-button el-form-tall-button-login" name="dologin" type="submit" value="Login"></input>
                            </input>
                        </input>
                    </input>
                </form>                
            </li>
        </ul>
        <!-- el-auth-box -->
    </li>
    <!-- el-auth-box-items -->
</ul>

Answer 1

您可以为 i 元素设置事件点击。 试试看：

if ($('.auth').length) {
    $('.auth i').click(function (event) {
        $(this).toggleClass('auth-active');
        $('.el-auth-box').toggle();
        //event.stopPropagation(); // not working
        event.preventDefault(); // not working
        //event.stopImmediatePropagation(); // not working
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="auth auth-active">
    <li class="auth-power">
        <i class="material-icons">power_settings_new</i>
        <ul class="el-auth-box" style="display: block;">
            <li class="el-auth-box-items">
                <form action="#" method="post">
                    <input dir="auto" name="emailhandle" placeholder="Email or Username" type="text">
                        <input dir="auto" name="password" placeholder="Password" type="password">
                            <div class="checkbox">
                                <input id="el-rememberme" name="remember" type="checkbox" value="1">
                                    <label for="el-rememberme">Remember</label>
                                </input>
                            </div>
                            <input name="csfr_code" type="hidden" value="0-1548314066-7814ce8b50bba9749389fdf8e76639a317c55c14">
                                <input class="el-form-tall-button el-form-tall-button-login" name="dologin" type="submit" value="Login"></input>
                            </input>
                        </input>
                    </input>
                </form>                
            </li>
        </ul>
        <!-- el-auth-box -->
    </li>
    <!-- el-auth-box-items -->
</ul>