Javascript-форум - Если нажатие сделано до и после

Покороче
(И без форичей:) )

<!DOCTYPE html>
<html lang="ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
<div class="p-nav-inner">
<button  class="owl-dot">before</button>
<button class="owl-dot">before</button>
<button class="owl-dot active">active</button>
<button class="owl-dot">after</button>
<button class="owl-dot">after</button>
<button class="owl-dot">after</button>
</div>
 
<script>
document.querySelector('.p-nav-inner').addEventListener('click', (e) => {
    if(e.target.matches('button.active~button')) 
        console.log('Press button after');
    else if (!e.target.classList.contains('active'))
        console.log('Press button before');
});
</script>
</body>
</html>

role="button" тоже не нужна. Она для button по дефолту назначается