2018-03-20  267 views 发表评论

javaScript阻止冒泡事件,stopPropagation()

 标签:

需求是点击登录弹出登录框,不想登录点击空白区域时登录框要隐藏,这个空白区域是一个空白满屏的div,他是登录框的父级,在这个父级添加点击事件隐藏div后,点击登录框时也会直接隐藏起来,这个时候需使用javascript中的stopPropation()方法。

引用下专业的解释:不再派发事件,终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点。

语法:event.stopPropagation()

代码:

<div class="loginBox" id="loginBox" style="display: none">
    <div class="body" id="loginBody">
        <form class="form-horizontal" role="form">
            <div class="form-group">
                <div for="username" class="col-sm-2 control-label">帐号</div>
                <div class="col-sm-10"><input type="text" name="username" class="form-control" id="username"></div>
            </div>
            <div class="form-group">
                <div for="password" class="col-sm-2 control-label">密码</div>
                <div class="col-sm-10"><input type="password" class="form-control" id="password"></div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-success">登录</button>
                    <button type="submit" class="btn btn-default">注册</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    $('#loginBox').click(function () {
        $('#loginBox').hide();
    });
    $('#loginBody').click(function (f) {
        f.stopPropagation();
    });
</script>

 

 

 

 

 

 

 

给我留言

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: