FrontEnd Dev/ES6

[ES6] 활성화 버튼 재 이벤트 방지

몽쯔 2022. 3. 5. 12:02

이벤트 발생 시 연속 클릭등 같은 이벤트가 중복으로 발생하는 경우가 생긴다.

예를 들어 같은 버튼 연타 같은것

 

그럴때는 성능 최적화를 위해 이벤트를 중단시키는 코드를 작성해줘야한다.

 

e.currentTarget은 현재 이벤트가 타겟을 가져온다.

그때 구분할 수 있는 클래스등을 판별해서 아예 리턴 시켜서 이벤트를 빠져 나와버리게 하면된다.

btns.forEach((btn, idx) => {
    btn.addEventListener('click', e => {
        e.preventDefault();

        let isOn = e.currentTarget.classList.contains('on');
        if (isOn) return;
        activation(idx);


    })
});