Detect click on body on empty spaces - jQuery selectable deselect

Question

I have a jQuery selectable lislt and I want to deselect the items when clicked outside the list.

Initially I used : $('body').click(...) which worked but it detects click on all the elements inside the body. I want to detect it except for clickable elements such as tags like a, button, input, select etc.

So I modified my code as follows:

$("body").click(function (event) {
    var tagname = event.target.tagName.toLowerCase();
    if (tagname != "a" && tagname != "button" && tagname != "input") {
        $('#selectable .ui-selected').removeClass('ui-selected');
    }
});

which does not look like an elegant way to do it. And it would even miss certain elements if not defined.

Is there a better way to do this? A way to detect empty spaces in body with no text or click functions attached?

Try `$('#selectable).stopPropogation()` at before your code block. Stack overflow sources: [1](https://stackoverflow.com/questions/10554446/no-onclick-when-child-is-clicked), [2](https://stackoverflow.com/questions/1369035/how-do-i-prevent-a-parents-onclick-event-from-firing-when-a-child-anchor-is-cli), and [3](https://stackoverflow.com/questions/985389/how-can-i-stop-an-onclick-event-from-firing-for-parent-element-when-child-is-cli), and [the jQuery documentation](https://api.jquery.com/event.stopPropagation/). — anon, Apr 22 '17 at 05:24

Detect click on body on empty spaces - jQuery selectable deselect

0 Answers0