代码之家 › 专栏 › 技术社区 › Code Lover

jquery preventdefault或stoppropagation()不使用切换窗体

jquery javascript

Code Lover · 技术社区 · 7 年前

我正在下拉登录表单。当用户单击登录项时,将打开下拉窗体。问题是,只要单击表单或其元素,它就会关闭。

我试过低于代码但没有工作

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>

1 回复 | 直到 7 年前

Minh Nguyen 7 年前

可以为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>