TDG TDG - 11 months ago 38
Javascript Question

On mouseover / mousedown inside div should not close And outside div have to close

when user click - 'booking' container, 'open_contents' have to show.

  1. when user mouseout of 'open_contents' container, it have to hide or click outside 'open_contents' or anywhere on 'body' of the page.

  2. with present below code, above point 1 works ok. But, i have increment/decrement button on 'open_contents' container. When user click button, 'open_contents' getting hide on every click. it should not get hide when i click button element on 'open_contents' container.

Please let me know your available comments.


<div class="booking">
<div class="head">Ticket Booking</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>
<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>


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

if (!$
&& $nonGroupBooking.has( === 0);

Answer Source

If you have bound the onclick event to $(document), all elements inside $(document) on click will also be considered as $(document).clicked

To stop the event bubbling up the event, you could use e.stopPropagation, read more on

Here please try my example -

I changed the $(".booking").on("click") behavior to show the .open_contents and also disabled $(".open_contents").on("mouseleave") event by default