Покороче
(И без форичей
)
<!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 по дефолту назначается