browser_javascript 스킬에 마우스 오른쪽 버튼 클릭 메뉴를 구현하는 방법

최근 Programmer's Basement에서 열린 토론에서 한 남자가 애플리케이션에서 마우스 오른쪽 버튼을 클릭하면 나타나는 오른쪽 클릭 메뉴와 유사한 효과를 브라우저에서 얻는 방법을 제안했습니다. Weiyu는 시도해 본 결과 해결이 어렵지 않다는 것을 알았습니다. 이제 소스 코드와 원칙을 모두와 공유해 보겠습니다. 하, 사실 효과는 완벽하지 않습니다. 어떤 영웅이라도 더 나은 해결책이 있다면 말이죠. yyu@enet.com.cn으로 Weiyu에게 편지를 보내실 수 있습니다.

가장 먼저 해결해야 할 문제는 어떤 상황에서 마우스 오른쪽 버튼을 클릭해도 IE 메뉴가 나타나지 않는 문제입니다. 두 가지 아이디어가 있는데, 하나는 포커스를 이동하는 것이고, 다른 하나는 웹 페이지의 아무 곳이나 클릭해도 오른쪽 클릭 메뉴가 나타나지 않고 마우스 클릭 메시지에 응답한다는 것입니다. (하하, 말도 안되는 일이 많네요. 아이디어가 있으신가요? 더 생각해봐야 알 수 있어요)


고민 끝에 다음과 같은 방법을 생각해냈습니다
오른쪽에 응답하세요. -메시지를 클릭하고 ALERT 상자에 메시지를 보냅니다(아직 새로운 내용이 없습니다).
2. 마우스 오른쪽 버튼 클릭 메시지에 응답하면 새 창이 나타납니다. 포커스를 홈 페이지에서 다른 곳으로 이동하세요.
그러나 테스트 결과 마우스 오른쪽 버튼을 클릭한 위치에 창이 나타날 때만 브라우저의 오른쪽 클릭 메뉴가 나타나지 않는 것으로 나타났습니다.
3. 마우스 오른쪽 버튼 클릭 메시지에 응답하면 HTML 대화 상자가 나타납니다. 즉, showModalDialog를 사용하여 HTML 대화 상자를 엽니다. 오른쪽 클릭 메뉴가 나타나지 않게 하려면 이 방법을 사용하십시오. 하지만 showModalDialog를 사용하여 연 대화 상자는 Window.Open을 사용하여 연 대화 상자처럼 화면 범위 밖으로 이동하지 않는다는 문제가 있습니다. 이는 화면에 나타나는 대화 상자를 항상 볼 수 있음을 의미합니다. 우리도 이 길로 갈 수 없어요.
4. 하하, 이것이 최후의 수단입니다. Weiyu는 때때로 선택을 마우스 오른쪽 버튼으로 클릭하거나 왼쪽 버튼을 클릭해도 응답이 없는 것을 발견했습니다. 따라서 매번 선택을 마우스로 클릭하면 브라우저의 오른쪽 클릭 메뉴가 나타나지 않습니다.

다음은 예시입니다. 관심 있으신 분은 Test.html에 복사해서 보시면 효과를 보실 수 있습니다.



VFish 테스트



var x, y

문서; .onmousemove=moveMouse

document.onmousedown=클릭


function moveMouse()

{

Layer1.style.left = event.clientX - 2;

Layer1.style.top = event.clientY - 2;

}

함수 click()

{

if (event.button==2)

{

x = event.clientX;

y = event.clientY

Layer1.style .visibility="";

window.setTimeout("showMenu();", 500)

}

else

{

HiddenPop()

PopMenu.style.visibility='hidden';

}


}

함수 showMenu()

{

PopMenu.style.left = x- 2

PopMenu.style.top = y-

PopMenu.style.visibility "";

HiddenPop();

}

function HiddenPop()

Layer1.style.visibility= ' Hidden';

}






창을 마우스 오른쪽 버튼으로 클릭하면 어떻게 되는지 확인하세요 :)













웨이유 메뉴







클릭! :)