2016-08-24 74 views
0

當用戶點擊 - '預訂'容器,'open_contents'必須顯示。關於mouseover/mousedown裏面div不應該關閉和外部div必須關閉

  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(); 
    } 
}); 

回答

0

如果你已經綁定的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")事件默認情況下

0

綁定一個單擊處理程序文件來隱藏內容,而且還添加了一個單擊處理程序的內容是停止傳播(防止點擊事件到達文檔處理程序)。

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

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