Click Event-Listner anstatt Hover auf Mobil-Clients

In einem Projekt sollte ein CTA, der durch Hover aus dem negative Margin geholt wurde, mobil durch ein Klick-Event verfügbar gemacht werden. Hier der kurze Vanilla Javascript Code mit rudimentären Features.

const items = document.querySelectorAll('.sticky-cta');
const breakpoint = window.innerWidth <= 768;

for (const item of items) {
    const wrapper = item.querySelector('.wrapper-class');
    const icon = item.querySelector('.icon-class');

    // If initial load is in mobile viewport
    if (breakpoint) {
        item.addEventListener('click', ctaClass, true);
    }

    function ctaClass() {
        item.classList.toggle('cta-clicked-js');
        wrapper.classList.toggle('cta-clicked-js');
        icon.classList.toggle('cta-clicked-js');
    }

    // On viewport change
    window.addEventListener('resize', (e) => {

        if (window.innerWidth <= 768) {
            item.addEventListener('click', ctaClass, true);
        }
        else {
            item.removeEventListener('click', ctaClass, true);
            item.classList.remove('cta-clicked-js');
        }
    })
}