Question

$(document).click(function(evt) {
    var target = evt.currentTarget;
    var inside = $(".menuWraper");
    if (target != inside) {
        alert("bleep");
    }

});

I am trying to figure out how to make it so that if a user clicks outside of a certain div (menuWraper), it triggers an event.. I realized I can just make every click fire an event, then check if the clicked currentTarget is same as the object selected from $(“.menuWraper”). However, this doesn’t work, currentTarget is HTML object(?) and $(“.menuWraper”) is Object object? I am very confused.

Answer 1

Just have your menuWraper element call event.stopPropagation() so that its click event doesn’t bubble up to the document.

Try it out: http://jsfiddle.net/Py7Mu/

$(document).click(function() {
    alert('clicked outside');
});

$(".menuWraper").click(function(event) {
    alert('clicked inside');
    event.stopPropagation();
});

• http://api.jquery.com/event.stopPropagation/

Alternatively, you could return false; instead of using event.stopPropagation();