div内のmouseover/mousedownは閉じてはならず、divの外側は閉じてください

Question

ユーザーが「予約」コンテナをクリックすると、「open_contents」が表示されます。

1. 「open_contents」コンテナのユーザーマウスアウトが、それは外「open_contents」を非表示にしたり、クリックする必要がありますか、どこかのページの「体」に関する。

2. コードの下にありますが、上記のポイント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)内のすべての要素も考慮され、あなたはe.stopPropagationを使用することができます

https://jsfiddle.net/w07gnzgg/1/私は$(".booking").on("click") behavioを変更 - 、私の例を試してみてください。ここ

https://api.jquery.com/event.stoppropagation/の続きを読みますrには.open_contentsが表示され、デフォルトでは$(".open_contents").on("mouseleave")イベントが無効にされます

Answer 2

バインド内容を隠すだけでなく、伝播を停止した内容にクリックハンドラを追加するために、文書へのクリックハンドラ（クリックイベントがドキュメントハンドラに届かないようにする）。あなたは$(document)にonclickイベントをバインドしている場合$(document)がイベントをバブルアップイベントを停止するには

を.clickedとして

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

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