click on body except on specific div
The selector $("body").not($("#menutop"))
will select the body
element if it is not the #menutop
element. Since the body
element clearly isn't #menutop
element, the body
element is still selected and the click event is attached to it.
Even if you click on the #menutop
element, the click event will still bubble up and trigger the click event on the body
element, therefore one option is to make a check to see if event.target
is the #menutop
element:
$(document).on('click', function (event) {
if (!$(event.target).closest('#menutop').length) {
// ... clicked on the 'body', but not inside of #menutop
}
});
Alternatively, you could also suppress the event bubbling and stop event propagation when clicking in the #menutop
element:
$(document).on('click', function (event) {
// ... clicked on the 'body', but not inside of #menutop
});
$('#menutop').on('click', function (event) {
event.stopPropagation();
});
You can use event.stopPropagation()
on the menutop element to prevent click through to the body below.
See this codepen for the solution
JS
$("body").click(function(){
alert("323");
});
$("#menutop").click(function(event) {
event.stopPropagation();
});