Question

当用户点击 - '预订'容器时，'open_contents'必须显示。

当用户使用'open_contents'容器时，必须隐藏或点击“open_contents”外部或页面“body”上的任何位置。
如下面的代码，上面的第1点工作正常。但是，我在'open_contents'容器上有增量/减量按钮。当用户点击按钮时，'open_contents'会在每次点击时隐藏。当我点击'open_contents'容器上的按钮元素时，它不应该隐藏。

请告诉我您的意见。

HTML：

<div class="booking">
    <div class="head">Ticket Booking</div>
</div>  

<div id="open_contents" class="open_contents">
    <div class="c_class">
        <button type="button" class="btn btn-default minus" id="group-btn-minus" disabled="disabled" data-type="minus" data-field="quant[1]">
            <span class="glyphicon glyphicon-minus"></span>
        </button>
        <input type="text" name="quant[1]" class="form-control group-input minus-plus-input" value="1" min="1" max="10">
        <button type="button" class="btn btn-default plus" id="group-btn-plus" data-type="plus" data-field="quant[1]">
            <span class="glyphicon glyphicon-plus"></span>
        </button>
    </div>
</div>

JS：

$(document).mouseup(function (e)
{
    var $nonGroupBooking = $('.open_contents');

    if (!$nonGroupBooking.is(e.target)
        && $nonGroupBooking.has(e.target).length === 0);
    {
        $nonGroupBooking.hide();
    }
});

Answer 1

将单击处理程序绑定到文档以隐藏内容，但也为停止传播的内容添加单击处理程序（防止单击事件到达文档处理程序）。

$(document).on('click', function(e) {
    $('.open_contents').hide();
});

$('.open_contents').on('click', function(e) {
    e.stopPropagation();
});

Answer 2

如果您已将onclick事件绑定到$(document)，则点击中$(document)内的所有元素也将被视为$(document)。点击

要停止事件冒泡活动，您可以使用e.stopPropagation，详细了解https://api.jquery.com/event.stoppropagation/

请尝试我的示例 - https://jsfiddle.net/w07gnzgg/1/

我更改了$(".booking").on("click")行为，默认情况下显示.open_contents并禁用$(".open_contents").on("mouseleave")事件

在mouseover / mousedown里面div不应该关闭而且div之外必须关闭

2 个答案: