javascript - .on ('click' ) 有效， .css ('display' ,'block' ) 有效，但不在一起

Question

我遇到了一个奇怪的问题。我有这个:

<div id="tstbtn" style="width:10px; height:10px; background-color:green;"></div>
<div id="dvDRKN">
    <div id="dvPopup">
        <asp:DropDownList ID="ddlDDL" runat="server">
            <asp:ListItem Text="Test" />
        </asp:DropDownList>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $(document).on('click', function (event) {
            if (!$(event.target).closest('#dvPopup').length) {
                $('#dvDRKN').css('display', 'none');
            }
        });

        $('#tstbtn').on('click', function () {
            $('#dvDRKN').css('display', 'block');
        });
    });
</script>

<style type="text/css">
    #dvDRKN
    {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.6);
        position: fixed;
        display:none;
    }
    #dvPopup
    {
        position: fixed;
        padding: 20px 15px;
        background-color: white;
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -100px;
    }
</style>

当我点击 #tstbtn div 时，它应该显示 #dvDRKN div，但它没有。

我测试了以下内容:

$('#tstbtn').on('click', function () {
        alert('test');
    });

而且效果很好。我还测试了直接在控制台中输入 $('#dvDRKN').css('display', 'block');，这也有效。但是当我将两者放在一起时，什么也没有发生。

Answer 1

添加 return false; 以防止它冒泡到切换 div 状态的父事件，这是您不希望发生的。

  <script type="text/javascript">
        $(document).ready(function () {
            $(document).on('click', function (event) {
                if (!$(event.target).closest('#dvPopup').length) {
                    $('#dvDRKN').css('display', 'none');
                }
            });

            $('#tstbtn').on('click', function () {
                $('#dvDRKN').css('display', 'block');
                return false;
            });
        });
    </script>