JavaScript 우클릭 이벤트 적용

오늘도 JavaScript를 배웠습니다. 이거, 나름 알고 있던 문법 기반으로 가는건가~ 할만한가~ 잠시 여유 좀 가지나~ 했더니 생각보다 골치 아팠습니다. 웹페이지 띄우고 클릭 할 때마다 오브젝트가 늘었다 줄었다 반짝반짝 하는 것을 보는 맛은 있네요. 그래도 아직까지 저는 리스트에 들어있는 데이터가 늘었다 줄었다 반짝반짝..어 안되잖아!? 하는게 더 재밌습니다. 되잖아?!면 더 재밌구요.

아무튼 Click 이벤트를 받아서 무언가를 한다는걸 배웠습니다. 생소하긴 한데 Unity3D에서 충돌 이벤트 클릭 이벤트 있었지, 그렇지, 하는 식으로 비유해가면서 들으니 또 괜찮네요. 그렇게 이해해도 되는건진 잘 모르겠습니다만 혹시 그걸로 사고가 난다면 수습한 미래의 제가 글을 쓰도록 하겠습니다.

서론이 길었던걸 보니 저도 꽤 재밌었던 모양입니다. 아무튼!
Click을 이것저것 받다보니 우클릭으로 이벤트를 받아보고 싶어졌습니다. 정리합니다.

<Click 이벤트>

기본적으로

object.addEventListener("click", function());

의 형태로 작동합니다.
myBtn이라는 오브젝트를 누르려면

myBtn.addEventListener('click', function() {
  console.log("으악!");
};

이 되겠네요.

<우클릭 이벤트>

우클릭을 감지하기 위해서는 event.which와 event.button의 값을 확인할 필요가 있습니다. 하필 판별 변수를 2개로 잡는 이유는 브라우저 호환성 때문이라고 합니다. 어떤 브라우저는 which로 우클릭을 판별하고 어떤 것은 button으로 판별한다고 합니다.

이런 형태로 하면 되겠군요?

myBtn.addEventListener('click', function() {
  if ((event.button === 2)||(event.which === 3)) {
            console.log("오른쪽 으악!");
  }
}; //안됩니다.
                       

안되잖아?
뒤로, 앞으로, 새로고침 뭐시기 하는 녀석이 뜹니다. 물론 이걸 보고 싶은게 아니죠.

<브라우저 기본 이벤트를 막아야 한다>

고 합니다. 처리합시다.

window.oncontextmenu=function() {
    return false;
}

myBtn.addEventListener('click', function() {
  if ((event.button === 2)||(event.which === 3)) {
            console.log("오른쪽 으악!");
  }
}; //아직도 안됩니다.

없어지긴 했는데 이번에도 제대로 동작이 안됩니다.
EventListener의 'click' 요녀석이 수상하니 찾아보았습니다.

<Mouse Event - click, mousedown>

종류는 많습니다만, 이번에 확인한 것은 두가지였습니다.

 - click : 마우스 왼쪽 클릭 입력을 받는다
 - mousedown : 마우스 클릭 입력을 받는다

click의 경우는 그냥 써도 알아서 입력을 받았는데, mousedown의 경우는 어떤 버튼인지 판별을 해줘야하는 모양입니다. log로 찍어보니 왼쪽 클릭은 button === 0, which === 1이군요. 마지막 수정입니다.

window.oncontextmenu=function() {
    return false;
}

myBtn.addEventListener('mousedown', function() {
  if ((event.button === 2)||(event.which === 3)) {
            console.log("오른쪽 으악!");
  }
}; //이번엔 제대로 됩니다.

우클릭 이벤트를 쓸 일이 또 어떻게 생길지는 잘 모르겠지만, 흔히 블로그에서 복사 방지로 어떻게 우클릭을 막았는지는 알게 되었습니다. 어떻게 풀 수 있을지도요.