title: Angular: focusout event not working with div tag
body: <p>I have a div tag which works as select box with multi select feature.</p>
  
  <pre><code>&lt;div class="multiselect" id="multiFocus" *ngIf="editMode" (focusout)="disableSelect($event)"&gt;
      &lt;div class="selectBox"&gt;
          &lt;div class="multi-select-user"&gt;
              &lt;div style="width:180px; display:inline-block"&gt;
                  &lt;ng-container *ngFor="let selectedBaseVal of selectedBaseLicences.icdata; let baseVal=index"&gt;
                      &lt;div class="base-selection" (click)="canshowCheckBoxes = !canshowCheckBoxes" *ngIf="(selectedBaseVal.License !== 'Select Base License')&amp;&amp; selectedBaseVal.Checked"&gt;
                          &lt;span style="padding:5px;"&gt;{{selectedBaseVal.License}}&lt;/span&gt;
                          &lt;span class="icon-close icon--small icn-float" (click)="selectedBaseVal.Checked = !selectedBaseVal.Checked"&gt;&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;div style="padding:6px;" *ngIf="selectedBaseVal.License === 'Select Base License'"&gt;
                                              Select Base License
                      &lt;/div&gt;
                   &lt;/ng-container&gt;
              &lt;/div&gt;
              &lt;div (click)="canshowCheckBoxes = !canshowCheckBoxes" class="icon-dropdown icn-float inline-display"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="multi-select-list" *ngIf="canshowCheckBoxes"&gt;
          &lt;div id="baseCheckboxes" style="display:block; width:200px; border:1px solid #dfdfdf; border-top:none"&gt;
              &lt;ng-container *ngFor="let base of selectedBaseLicences.icdata"&gt;
                   &lt;div&gt;
                       &lt;label class="checkbox"&gt;
                           &lt;input type="checkbox" [checked]="base.Checked" name="checkbox1" (change)="base.Checked = !base.Checked"&gt;
                           &lt;span class="checkbox__input"&gt;&lt;/span&gt;
                           &lt;span class="checkbox__label"&gt;{{base.License}}&lt;/span&gt;
                       &lt;/label&gt;
                   &lt;/div&gt;
              &lt;/ng-container&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>It looks like this <a href="https://i.stack.imgur.com/c55k2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/c55k2.png" alt="Multiselect"></a>What I'm trying is, when I click outside the div it should get disabled, so I'm trying with focusout event and in disableSelect() method I'm just making a value false. But focusout event is not working. Does div doesn't support focusout? Or is there any other way to disable?</p>