오른쪽 마우스 클릭 방지 해제 방법 - 자바스크립트 이용한 방법 ( 티스토리 블로그 - oncontextmenu, ondragstart, onselectstart )

안녕하세요. 행복을 노래하는 초매입니다. 

오랜만에 서두를 이렇게 시작하는 것 같은데요. 요즘 빡빡한 업무로 인해 블로그에 신경을 많이 못쓰고 있는 것은 아니지만, 조금씩 블로그를 운영하는 거에 대한 한계가 조금씩 보이는 것 같습니다. 실력의 한계, 체력의 한계, 꾸준함의 한계...ㅎㅎㅎ 하지만, 조금씩 힘내야겠죠? ^^

■ 티스토리 블로그에서 오른쪽 마우스 클릭이 안된다???

블로그 초기에 티스토리를 만들고, 환경을 설정할 때, 스팸, 불펌방지를 위해 마우스 오른쪽 클릭 방지 플로그인을 설정한 적이 있었는데요. 그래서 그런지, 티스토리 블로그에서 마우스 우클릭을 해도 메뉴가 나오지 않고, 글을 긁어서 선택을 하려 해도 아무것도 안되네요. 

갑자기 짜증나서, 마우스 오른쪽 마우스 클릭 방지 설정을 해지를 하고, 다시 시도를 해보니, 그래도 안되는 것이었습니다. 도대체 이유가 뭘까? 뭘까? 고민만 하다가 티스토리 블로그에서 제가 모르는 설정이거나 버그 일수도 있겠다라는 생각을 했습니다. 어차피 블로그도 자동으로 생성되긴 하지만, 이것 또한 사람이 만들었을 것이라 생각했기 때문이죠...ㅎㅎㅎ

그래서 블로거머니 자유게시판에 몇번 문의를 해봤지만, 저와 같이 불편함을 가지고 있는 분들이 없으셔서 해결책을 못찾고 있다가 오늘 아침에야.... "유레카".... 갑자기 생각난 것이 있었습니다. 

"해답은 스크립트 문제일 수 있겠다?!!?"

■ 크롬 개발자도구를 이용해서 소스를 분석하다...

크롬 개발자도구를 이용하면, 마우스 오른쪽 클릭을 이용하지 않고도 소스보기를 할 수 있는데요. 개발자 도구를 이용하는 방법은 예전에도 몇번 언급한 부분이 있어서 PASS 하도록 하죠...^^ 소스를 불을 켜고 찾아 봤는데요. 너무 소스 길이가 길어서 제 눈으로는 도저히 못 찾겠더라구요. 이 소스는 블로그 이미지, 글들을 모두 표현한 소스 이기 때문에 그 양이 방대하죠... 그래서 혹시나 하는 마음으로 관리페이지로 눈을 돌렸습니다.

■ 관리페이지의 HTML/CSS 를 클릭해보자...

관리페이지를 들어가면, 위 이미지와 같이 HTML/CSS 편집이라는 메뉴가 나올 것입니다. 만약 이와 같은 메뉴가 나오지 않는다면 당신은 티스토리 블로그가 아닌 네이버, 다음, 구글 등 다른 블로그 일 가능성이 높습니다. 그러기에 이미지와 같은 환경이 아니라면 글 읽기를 중단하셔도 됩니다... 

왜냐구요? 별 필요 없을테니까요...^^ 

하지만, 도움이 될 것 같으면 계속 읽으셔도 뭐라 하진 않겠습니다. ^^

■ HTML/CSS를 자세히 들여보다...

헉~ 갑자기 눈에 띄는 무언가를 발견했습니다. 바로 return false 와 oncontextmenu, ondragstart ...

return false는 어떠한 이벤트나 실행 중간에 중지하거나 취소하는 것인데, 이것이 contextmenu, dragstart 와 연관이 있도록 스크립트가 작성되어 있다니... 갑자기 촉이 왔죠... 

아~ 바로 이거구나...

■ 자바스크립트의 소소한 설명

document.oncontextmenu

- 컨텍스트메뉴... 바로 오른쪽 마우스 클릭시 표시되는 팝업메뉴 이벤트를 의미

document.ondragstart

- 마우스 왼쪽 클릭 후 이미지 혹은 단어를 드래그를 할 때 발생되는 이벤트를 의미

document.onselectstart

- 마우스 왼쪽 클릭 후 텍스트를 선택할 때 발생되는 이벤트를 의미

아마 정확하진 않지만, 위 설명대로 자바스크립트 이벤트를 의미하는 것입니다. Javascript 가 생소하신 분들은 엄청 어려운 내용이시겠지만, 조금 내용을 아시는 분들이라면 금방 이해가 갈 내용일 것 같네요...ㅎㅎㅎ 이렇듯 이벤트는 함수와 연결이 되어 해당 이벤트가 일어났을 때 해당 함수를 호출해서 스크립트를 수행하도록 되어 있는데요. 그것을 return false 만 있는 함수로 연결하게 되니, 당연히 우클릭이든, 단어 선택이든 되지 않았던 것입니다. OTL...

 

쉽게 설명하진 못하겠지만, 홈페이지상에서 마우스를 클릭을 하면 onclick 이벤트가 발생되구요. 마우스 오른쪽 마우스 클릭을 하면, onclick, oncontextmenu 이벤트가 발생합니다. 이벤트가 발생했다고 무언가가 실행이 되진 않습니다. 이것이 발생할 때 Javascript로 어떤 함수를 실행하게끔 연결만 해주면, 해당 내용이 실행이 되는 것이죠. 

Javascript 세계... 보면 볼수록 어렵죠? 

■ 해당 부분을 주석처리 하다...

자~ 그러면, 언제부터 제가 이 소스를 삽입했는지,,, 기억을 더듬어 올라가니,,, SyntaxHightlighter 를 추가했을 때 아마 무작정 복사, 붙여넣기 했던 것 같습니다. 그 때 부터 이상하게 마우스 우클릭 및 범위 지정이 안되었던 것이죠... 그러면, 불편함의 원인이 되었던 이 부분을 주석처리해보도록 하겠습니다. 그러면 정상적으로 제가 원하는 것이 되겠죠? ㅎㅎㅎ

■ 주석처리 후 정상적으로 된 블로그...

위 이미지를 보면, 단어를 선택할수도 있고, 오른쪽 마우스 클릭으로 복사를 할 수도 있습니다. ㅋㅋㅋ 와... 역시 혁신적인 아이디어는 갑자기 생각이 나나봅니다...^^ 

자~ 제가 끙끙 앓았던 문제는 모두 해결이 되었지만, 갑자기 궁금한 것이 생겼습니다. 그러면 플러그인에 있는 마우스 오른쪽 클릭 방지를 설정하면, 정말 오른쪽 마우스 클릭이 되지 않을까? 

당장 실험해보자~!!!!!

■ 관리 페이지의 플러그인 설정 클릭...

▲ 플로그인 설정 클릭...

▲ 마우스 오른쪽 클릭 방지 설정

위 이미지처럼 플러그인이 설정된 것이면, 파란색 줄로 다른 설정과 다르게 표시가 됩니다. 이런 것이 바로 사용자 경험 디자인이 아닐까요? ㅋㅋㅋ

■ 설정된 후 오른쪽 마우스 클릭이 될까?

▲ 크롬에서는 마우스 우클릭이 되네? ^^?

결론적으로 본다면, 맞을수도 있고, 아닐수도 있다는 것입니다. 

익스클로러 9 환경에서 테스트를 했을 경우 오른쪽 마우스 클릭이 되지 않았습니다. 하지만, 크롬에서는 플러그인과 상관없이 오른쪽 마우스 클릭으로 많은 것을 할 수가 있네요. 아마 플러그인을 설정하는 것이 Javascript 방식이 아닌 다른 방식인 듯 합니다. 갑자기 어떤 방식으로 플러그인이 설정되는지도 궁금하네요...ㅎㅎㅎ

오늘 하루는 평소에 답답했던 부분을 깔끔하게 해결한 하루였는데요. 이 포스팅을 반대로 생각하면, document.oncontextmenu 이벤트를 이용하게 되면, 마우스 우클릭을 제한할 수도 있겠다 라는 생각이 드시나요? ㅎㅎㅎ

제가 모르고 복사했던 것 처럼, HTML 에 해당 소스를 복사하셔서 적용하시면, 여러분의 블로그는 마우스 우클릭, 단어 선택, 이미지 드래그는 되지 않을 것 같네요. 평소에도 이렇게 반대로 생각하는 연습을 조금씩 해야겠습니다...^^v

이상, 미션 컴플리트한 초매였습니다.