0

So I have some

  • elements with class "artarea". I would like to use some action when user clicks anywhere on the page outside of those
  • elements.

    Here's my try:

    let elsewhere = document.querySelectorAll(":not(.artarea)")

  elsewhere.onclick = () => {...}

    Unfortunately nothing happens on clicking outside of

  • elements. Why is that?
    • Akash Kumar
    • 1
    • Use [event delegation](//developer.mozilla.org/en/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation) instead of adding several event listeners — it’s more maintainable and applies to dynamically added elements. See [the tag info](/tags/event-delegation/info) and [this Q&A](/a/55452921/4642212). Use the [event argument](//developer.mozilla.org/en/docs/Web/API/EventTarget/addEventListener#The_event_listener_callback): `addEventListener("click", ({`[`target`](//developer.mozilla.org/en/docs/Web/API/Event/target)`}) => { if(!target.closest(".artarea")){`…`} });`. – Sebastian Simon Nov 25 '22 at 01:03

    0 Answers0