JS를 사용하여 마우스 오른쪽 버튼 클릭 메뉴를 사용자 정의하는 간단한 예 공유

이 글에서는 JS 사용자 정의 마우스 오른쪽 버튼 클릭 메뉴의 간단한 구현 예를 주로 소개합니다. 편집자는 이것이 꽤 좋다고 생각하므로 지금 공유하고 참고용으로 제공하겠습니다. 에디터를 따라가서 살펴봅시다

RT, 원리를 설명한 간단한 예제

코드는 다음과 같습니다.

<p id="menu" style="width: 0;height: 0;background: cadetblue;position: absolute"></menu>

위의 p를 마우스 오른쪽 버튼 클릭 메뉴로 설정하고 아름답게 꾸미고 싶다고 가정해 보겠습니다. 마음대로.

원칙은 컨텍스트 메뉴 이벤트를 사용하는 것입니다. 이 이벤트가 마우스 오른쪽 버튼을 클릭할 때 발생하면 이벤트 개체 가 마우스와 페이지 왼쪽 상단 모서리

사이의 거리를 얻을 수 있습니다.

이 두 가지 속성을 사용하여 p의 수평 및 수직 오프셋을 제어하고 false를 반환하여 이벤트의 기본 동작을 취소하여 브라우저의 오른쪽 클릭 메뉴를 시뮬레이션할 수 있습니다.

document.oncontextmenu=function(e){

　　var x=e.clientX+'px';

　　var y=e.clientY+'px';

　　var node=document.querySelector('#menu');

　　node.style.left=x;

　　node.style.top=y;

　　node.style.width=100+'px';

　　node.style.height=100+'px';

　　return false; //很重要，不能让浏览器显示自己的右键菜单

}

이제 닫는 부분입니다. 마우스 오른쪽 버튼 클릭 메뉴를 닫는 방법은 일반적으로 빈 영역을 마우스 왼쪽 버튼으로 클릭하는 것입니다.

document.onclick=function(e){

　　if(e.target.id!='menu')

　　{

　　　　var node=document.querySelector('#menu');

　　　　node.style.width=0;

　　　　node.style.height=0;

　　}
}

이것은 단지 기본적인 아이디어일 뿐이며 핵심은 컨텍스트 메뉴 이벤트입니다. 이를 바탕으로 CSS를 사용하여 마음대로 꾸미고 업그레이드할 수 있으며 전환과 같은 속성을 추가하여 animation 효과를 얻을 수 있습니다.

위 내용은 JS를 사용하여 마우스 오른쪽 버튼 클릭 메뉴를 사용자 정의하는 간단한 예 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!