How to make event.target refer to a div and all its children? (detect when mouse click is NOT on a div and it's children)

How to make event.target refer to a div and all its children? (detect when mouse click is NOT on a div and it's children)

event.target properties
addeventlistener
event target vs currenttarget
event.target jquery
event.target.value javascript
event target id
event.target.id not working
event delegation

How can I make event.target work for not just the div given but also all it's children? The best I can come up with is to either:

1) list all children in the event.target function ie:

window.addEventListener('mouseup', function (event) {

  if(event.target != div && event.target != divChild1 && event.target != divChild2 && event.target != divChild3 && event.target != divChild4 && event.target != divChild5 ... && event.target != divChildn) {

  closeWindow();

  } });

OR

2) put all the children in a class (which seems like an awful lot of html) and then just have event.target refer to that class i.e.:

window.addEventListener('mouseup', function (event) {

      if(event.target != classWithAbout50divs) {

      closeWindow();

      } });

But surely there is a way that requires less code..?

And please, no jquery. Thanks


If you only need direct children you can use element.children to loop though the children of said div.

Otherwise element.querySelectorAll('*'); should get you all elements inside of said element.

event.target, The target property can be the element that registered for the event or a The click handler is added to an unordered list, and the children of its li children are�


You can use a variation of the answer provided here to check whether event.target is the div in question or any of its children.

For example:

function isDescendantOrSelf(parent, child) {
     let node = child;
     while (node != null) {
         if (node == parent) {
             return true;
         }
         node = node.parentNode;
     }
     return false;
}

window.addEventListener('mouseup', function (event) {
    const root = document.getElementById('handle');
    
    if (! isDescendantOrSelf(root, event.target)) {
        console.log('Passed!');
    }
});
<div id="handle">
    <div>Thou</div>
    <div>
        shall <div>not</div>
    </div>
    <div>pass</div>
<div>

Bubbling and capturing, Why does the handler on <div> run if the actual click was on <em> ? we have 3 nested elements FORM > DIV > P with a handler on each of them: Check it out: div { background-color: blue; position: absolute; top: 25px; left: 25px; the 2nd phase (“target phase”: the event reached the element) is not�


I seem to have found a solution I like. First thing's first:

event.target != document.getElementsByClassName("myClassName");

Event.target doesn't seem to work if classes are referenced. I've only managed to make it work if I reference elements by ID. That is:

event.target != document.getElementById("myDivId");

Now, if I wanted something to happen whenever I DON'T click on a div and all it's children, instead of writing:

window.addEventListener('click', function (event) {
  if(event.target != myDivId) {
    doSomething();
    console.log("something is done");
  }
})

I've found success with this:

window.addEventListener('click', function (event) {
  if(!myDivId.contains(event.target) {
    doSomething();
    console.log("something is done");
  }
})

For potential support issues, see https://stackoverflow.com/a/43249467/11930305

Mouse events, Please note: such events may come not only from “mouse devices”, but are Also we can see the button property that allows to detect the mouse button, then you can get everything from the page source though. </ div > parentNode. children].filter(child => child != li); if (!event.target.closest('li')) return;


Event.target, The target property of the Event interface is a reference to the object onto currentTarget when the event handler is called during the bubbling or Make a list var ul = document. appendChild(li2); function hide(e){ // e.target refers to the clicked <li> If you'd like to contribute to the data, please check out�


Element: click event, primary mouse button) is both pressed and released while the pointer is located The MouseEvent object passed into the event handler for click has its detail <div> ) and which also don't have event listeners directly attached to the to the element or any of its ancestors up to but not including <body> .


Handling Events :: Eloquent JavaScript, Clicks on the button cause that handler to run, but clicks on the rest of the Most event objects have a target property that refers to the node where they originated. height: 20px"> </div> <script> let lastX; // Tracks the last observed mouse X A handler on a parent element is not notified when a child element gains or�