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>

当我点击#dvDRKN div时，它应该显示#tstbtn 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>

.on（'click'）有效，.css（'display'，'block'）有效，但不能一起使用

1 个答案: