0
$(".checkbox-menu").on("change", "input[type='checkbox']", function() {
   $(this).closest("li").toggleClass("active", this.checked);
});

$(document).on('click', '.allow-focus', function (e) {
  e.stopPropagation();
});
0

1 Resposta 1

1

Pode usar document.addEventListener verificando com event.target qual elemento foi clicado (click) ou modificado (change) (o event é o primeiro argumento do callback, onde eu posso dar um nome qualquer. No caso coloquei apenas e):

document.addEventListener("change", function(e){
   var el = e.target; // elemento alterado
   if(el.closest(".checkbox-menu")){ // verifico se ele está dentro da classe
      el.closest("li").classList.toggle("active", this.checked);
   }
});

document.addEventListener("click", function(e){
   var el = e.target;
   // aqui eu verifico se o elemento clicado é filho de .allow-focus
   // inclusive os nós de texto, ou o próprio .allow-focus
   if(el.classList.contains("allow-focus") || el.closest(".allow-focus")){
      console.log(".allow-focus clicado");
      e.stopPropagation();
   }
});
.active{
   color: red;
}

.allow-focus{
   background: red;
}
<ul class="checkbox-menu">
   <li>
      <input type="checkbox"> Item 1
   </li>
   <li>
      <input type="checkbox"> Item 2
   </li>
</ul>
<span class="allow-focus">
   <input type="checkbox"> clique aqui
   <br>
    clique aqui também, ou em qualquer área vermelha
</span>

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 .