Não conhecia o event.path, mas descobri que precisei dele a algumas semanas.. Tive que fazer maior gambiarra.
Infelizmente, não sei como te ajudar. Mas, pelo que entendi o event.path retorna um array com o element que foi clicado na primeira posição.
E se tentar passar direto para a function sem fazer o reduce? Reflete na DOM?
document.addEventListener('click', event => {
pulseToggle(event.path[0]);
})
O event.path[0]
pegaria o primeiro elemento do array, seria igual ao event.target
Eu precisei usei o path porque eu tava tentando clicar em um elemento mas ele nem sempre estava em primeiro do array.
O que eu poderia fazer é pegar todos os elementos que vinham na frente desse elemento que queria pegar no event.target
e colocar pointer-events: none
no CSS deles, assim eles não seriam pegos no event.path
ou event.target
Relativo ao primeiro problema que relatei, na verdade era um erro meu
Eu tava passando uma string para um objeto, afim de acessar uma função de mesmo nome
const acao = 'darOi'
const action = {
darOi: () => console.log('oi')
}
action[acao]()
// Resultado esperado no log: 'oi'
Dentro do objeto action, tinham funcoes como remover, e concluir
Então eu acessava essas acoes usando action[acao]()
e na linha de baixo dava um atualizarTabela()
O que dava certo, fazia a ação e logo após atualizava a tabela pra mostrar os resultados pós ação de remover ou concluir
O problema foi que eu tinha outra function de editar, mas editar nao necessita atualizar a tabela, então atualizarTabela()
não precisava ser chamado após o action[acao]()
, e sim na função de salvar as edições
Então ele mandava o elemento pro edit, conseguia fazer a referência ao elemento no DOM, mas ele logo em seguida atualizava tabela e eu perdia a referência, erro besta, mas pode servir, e serviu de aprendizado