onClickOut (click after leaving the element)

Question

The problem was that I need a "onClickOut"-Event.

For example: You have a DIV viewing on hovering (onMouseOver) some Button or what ever.

If you click outside the element it needs to hide, but if you say $("body").click it also will be hidden when you click into the element itself. :/

Now I listen the mouseposition and when mouseleave() I set a var on clicking into my element. In the next step I listen a generelly click-event (body) but I ask if the var was set. If not it has to be a click outside my element, so I can hide my element.

I hope you can use it:

$("#schnellsuche_box").mouseleave(function() {
    var inside;
    $("#schnellsuche_box").click(function() {
        inside = true;
    });
    $("body").click(function() {
        if(!inside) {
            $("#schnellsuche_box").hide();
        }
    });
    delete inside;
});

Note: you can't `delete` a local variable. (But even if you could, it wouldn't make sense here because your click handlers try to use that variable.) — nnnnnn, Aug 21 '13 at 11:08

score 4 · Accepted Answer · answered Aug 21 '13 at 10:23

You do that by listening to a click on the document level, and inside the event handler you check if the clicked element was #schnellsuche_box or any element inside #schnellsuche_box by using closest(), like so :

$(document).on('click', function(e) {
    if ( ! $(e.target).closest('#schnellsuche_box').length ) 
         $('#schnellsuche_box').hide();
});

FIDDLE

score 1 · Answer 2 · answered Aug 21 '13 at 10:06

1

You need to stop the #schnellsuche_box click event from bubbling up to the body click event (that's default event propagation) by doing return false:

$("#schnellsuche_box").click(function() {
    inside = true;

    return false;
});

answered Aug 21 '13 at 10:06

Mathew Thompson

55,877
15
127
148

1

`event.stopPropogation();` will work too, I have been told that `return false` stops bubbling only when used in jquery callbacks – Aug 21 '13 at 10:11
@rps Yeah that will work, but that's not exclusive to jQuery, it works in just JavaScript too. – Mathew Thompson Aug 21 '13 at 10:25
1

I'm not sure what "it" is referring to in your comment *" it works in just JavaScript too"*, but if it is `return false;`, then it will only prevent the default event in "non-jQuery" event handlers, not event propagation. – Felix Kling Aug 21 '13 at 10:34
Think he means native-JS (non-jQuery) //event.stopPropogation() – Froschkoenig84 Aug 21 '13 at 11:07

score 0 · Answer 3 · answered Aug 21 '13 at 10:11

0

Try this:

$("body").click(function(e) {
   var $target = $(e.target);
   if (!$target.is('#schnellsuche_box') &&
       !$target.parents('#schnellsuche_box').length) {
       alert('outside');
   }
});

answered Aug 21 '13 at 10:11

jcubic

61,973
54
229
402

score 0 · Answer 4 · 2013-08-21T11:09:31.570

0

$("#schnellsuche_box").on("click",function(event) {
  event.preventDefault();
  event.stopPropagation();
});

edited Aug 21 '13 at 11:09

answered Aug 21 '13 at 10:17

@F4r-20 You don't have to, `event` refers to the current JavaScript event. – Mathew Thompson Aug 21 '13 at 10:25
I didn't know, thanks. – George Aug 21 '13 at 10:26
@mattytommo - at least it does if you're using IE and some versions of Chrome. It should be defined as a parameter. – adeneo Aug 21 '13 at 10:28
This will fail in older IE versions (which don't support `stopPropogation`) and in Firefox (which doesn't provide a global `event` object). Define the event handler so that it accepts `event as first argument and it will work fine. jQuery passes an augmented event object to event handlers, which solves these browser differences. – Felix Kling Aug 21 '13 at 10:30
@FelixKling now okay? – Aug 21 '13 at 10:55

onClickOut (click after leaving the element)

4 Answers4