关于mouseover/mousedown里面div不应该关闭和外部div必须关闭

问题描述：

当用户点击 - '预订'容器，'open_contents'必须显示。关于mouseover/mousedown里面div不应该关闭和外部div必须关闭

时的“open_contents”容器用户鼠标移开，就可以隐藏或外单击“open_contents”或页面的“体”的任何地方。
以下代码，上面的点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(); 
    } 
});

答

如果你已经绑定的onclick事件$(document)上点击里面$(document)所有元素也将被视为$(document) .clicked

要停止事件冒泡的情况下，你可以使用e.stopPropagation ，了解更多关于https://api.jquery.com/event.stoppropagation/

这里请尝试我的例子 - https://jsfiddle.net/w07gnzgg/1/

我改变了$(".booking").on("click") behavio r显示.open_contents并且也禁用$(".open_contents").on("mouseleave")事件默认情况下

答

绑定一个单击处理程序文件来隐藏内容，而且还添加了一个单击处理程序的内容是停止传播（防止点击事件到达文档处理程序）。

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

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

关于mouseover/mousedown里面div不应该关闭和外部div必须关闭

相关推荐