[인터랙티브 Javascript] 04. 다양한 이벤트 알아보기

마우스를 이용해서 마우스 왼쪽 버튼을 누르면 청기(flagBlue)가 올라가고, 마우스 오른쪽 버튼을 누르면 백기(flagWhite)가 올라가도록 기획을 했는데요.

나름대로 열심히 고민해서 코드를 작성해봤지만 좀처럼 구현하기가 쉽지 않고 자꾸만 오른쪽 클릭을 할 때 브라우저의 메뉴창이 나타나서 어떻게 해야할지 막막해 하는 중입니다.

 

1. 마우스 왼쪽 버튼을 누른 순간 청기(flagBlue)에 'up'이라는 클래스 속성값이 추가되고, 마우스 오른쪽 버튼을 누른 순간 백기(flagWhite)에 'up'이라는 클래스 속성값이 추가되는 flagUp 함수를 완성해 주세요.
2. 웹 페이지에서 contextmenu 이벤트가 발생하면 브라우저의 메뉴창이 나타나지 않도록 막아주세요.

참고로 flagUp 함수 안에 있는 setTimeout 함수는

두 번째 파라미터로 전달한 값의 밀리초 만큼의 시간 이후에 첫 번째 파라미터로 전달한 함수를 실행시켜주는 함수입니다.

 

---

const flagBlue = document.querySelector('.flag-blue');
const flagWhite = document.querySelector('.flag-white');

function reset() {
    document.querySelector('.up').classList.remove('up');
}

// 1. flagUp 함수를 완성해 주세요.
function flagUp(e) {
    if (e.button === 0) {
        flagBlue.classList.add('up');
    } else if (e.button === 2) {
        flagWhite.classList.add('up');
    }


    // 500 밀리초 뒤에 reset함수를 실행
    setTimeout(reset, 500);
}

// 2. 마우스 오른쪽 버튼 클릭시 나타나는 메뉴창을 막아주세요.
document.addEventListener('contextmenu', function (event) {
    event.preventDefault();

});

// 테스트 코드
document.addEventListener('mousedown', flagUp);

---

본 내용은 Codeit의  'Javascript 중급' 강의를
참고하여 작성한 내용입니다.