$(".checkbox-menu").on("change", "input[type='checkbox']", function() {
$(this).closest("li").toggleClass("active", this.checked);
});
$(document).on('click', '.allow-focus', function (e) {
e.stopPropagation();
});
1 Resposta
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>