Question

Usually when I want to check if any child element inside a parent element was clicked I use something like this:

$(document).click(function (e) {
    alert($(e.target).is("#somediv *"));
}

But now I have the somediv in a variable. I have tried:

var somediv = $(this);
$(document).click(function (e) {
    alert($(e.target).is($(somediv, "*")));
}

But it doesn’t work. How can I do that? Is it the best way to detect if a element or any child element was clicked?

Answer 1

No matter whether somediv is a DOM element or a selector, use .closest ^[docs]:

if ($(e.target).closest(somediv).length > 0)

This will traverse the DOM up, starting at e.target and tests whether any ancestor (or the element itself) is somediv. If you want to exclude e.target, start at its parent:

$(e.target).parent().closest(somediv)

---

Another way, depending on the overall context, could be to simply bind the event handler to somediv:

somediv.click(function() {
   // click originated from inside the div
});

---

There is no easy way to create a selector from an existing DOM element. If somediv was containing a selector then you could use string concatenation to combine it:

$(e.target).is(somediv + ' *');