1

Estou com um problema em uma implementação AngularJS 1.6.

Preciso disparar um evento ao clicar fora de um elemento "div" por exemplo.

Obs: o ng-blur so funciona com campos de formulário.

<li class="dropdown-toggle" ng-controller="SearchCtrl as ctrl">
  <md-input-container class="search-main">
    <label>Pesquisa</label>
    <input  ng-keyup="ctrl.loadSearchResults(search)" ng-model="search.term">
  </md-input-container>
  <div class="search-results" ng-if="ctrl.openModalSearch" ng-include="'views/search.html'"></div>
</li>

Quero disparar o evento quando clicar fora do "li".

1 Resposta 1

0

Com JavaScript puro você pode usar addEventListener no document e testar se o elemento DIV em questão está ou não no array de propagação do evento.

Tomei a liberdade de deixar o seu DIV visível para facilitar o teste, clique dentro e fora do quadrado amarelo:

document.addEventListener('click', evt => {
  if (evt.path.indexOf(document.querySelector('div.search-results')) < 0) {
    alert('fora no div!');
  } else {
    alert('dentro do div!');
  }
}, true);
.search-results {
  width: 100px;
  height: 100px;
  margin: 10px 10px;
  background-color: yellow;
}
<li class="dropdown-toggle" ng-controller="SearchCtrl as ctrl">
  <md-input-container class="search-main">
    <label>Pesquisa</label>
    <input  ng-keyup="ctrl.loadSearchResults(search)" ng-model="search.term">
  </md-input-container>
  <div class="search-results" ng-if="ctrl.openModalSearch" ng-include="'views/search.html'"></div>
</li>

JSFiddle: https://jsfiddle.net/nunks/gh2Lw9ux/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .