jquery if an element is not clicked

Question

Is there an efficient way in jQuery to detect if anything other than a specific element (and it's children) has been clicked ??

<body>
  <header></header>
  <p>stuff<p>
  <div class="floating-form">
    <form>more stuff</form>
  </div>
  <footer></footer>
</body>

Whats the best way to remove the floating form, by listening for a click on anything other than the floating form?

http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element — Rafay, Jun 08 '11 at 19:50

score 3 · Accepted Answer · answered Jun 08 '11 at 19:41

3

Bind a click event listener to $(document) that removes div.floating-form.
Bind a click event to div.floating-form that stops event propogation.

answered Jun 08 '11 at 19:41

simshaun

21,263
1
57
73

score 2 · Answer 2 · answered Jun 08 '11 at 19:41

The usual approach is to assign a click event handler to the specific element that does nothing other than stop event propagation. Then assign another click handler to the entire page (i.e. to the document) that removes the element in question. Clicks on the element won't propagate up to the document, so you'll get the functionality you want.

score 0 · Answer 3 · answered Jun 08 '11 at 19:40

0

You can use the event.target attribute to determine what element triggered the click.

http://api.jquery.com/event.target/

answered Jun 08 '11 at 19:40

Jared

12,406
1
35
39

score 0 · Answer 4 · answered Jun 08 '11 at 19:41

0

$(document).click(function() {
    //do something
});
$(".floating-form").click(function() {
    return false;
});

answered Jun 08 '11 at 19:41

joakimdahlstrom

1,575
1
11
23

jquery if an element is not clicked

4 Answers4