Detect click outside div using javascript

Question

It depends on the individual use case but it sounds like in this example there are likely to be other nested elements inside the main div e.g. more divs, lists etc. Using Node.contains would be a useful way to check whether the target element is within the div that is being checked.

window.addEventListener('click', function(e){   
  if (document.getElementById('clickbox').contains(e.target)){
    // Clicked in box
  } else{
    // Clicked outside the box
  }
});

An example that has a nested list inside is here.

You can check if the clicked Element is the div you want to check or not:

document.getElementById('outer-container').onclick = function(e) {
  if(e.target != document.getElementById('content-area')) {
      console.log('You clicked outside');
  } else {
      console.log('You clicked inside');
  }
}

Referring to Here.

you can apply if check for that inside your click event

if(event.target.parentElement.id == 'yourID')

I came up with a hack for this that's working well for me and that might help others.

When I pop up my dialog DIV, I simultaneously display another transparent DIV just behind it, covering the whole screen.

This invisible background DIV closes the dialog DIV onClick.

This is pretty straightforward, so I'm not going to bother with the code here. LMK in the comments if you want to see it and I'll add it in.

HTH!

In Angular 6 and IONIC 3, I do same as here:

import {Component} from 'angular/core';

@Component({
  selector: 'my-app',
  template: `
    <ion-content padding (click)="onClick($event)">
      <div id="warning-container">
      </div>
    </ion-content>
  `
})
export class AppComponent {
  onClick(event) {
    var target = event.target || event.srcElement || event.currentTarget;
    if (document.getElementById('warning-container').contains(target)){
      // Clicked in box
    } else{
      // Clicked outside the box
    }
  }
}

This working fine on web/android/ios. It might be helpful for someone, Thanks.