모든 요소의 오른쪽 클릭 메뉴를 사용자 정의하기 위한 JavaScript 구현 방법

모든 요소의 오른쪽 클릭 메뉴를 사용자 정의하기 위한 JavaScript 구현 방법_기본 지식

WBOY

풀어 주다： 2016-05-16 17:34:04

원래의

1222명이 탐색했습니다.

1. 일부 개념:

1. 마우스 이벤트에는 하단 속성이 있습니다. 어떤 마우스 버튼을 클릭했는지 나타내는 정수를 반환합니다.
BUG: IE와 표준 DOM의 마우스 이벤트 중 동일한 값을 갖는 유일한 버튼 속성 값은 "오른쪽 클릭" 이벤트이며 둘 다 2를 반환합니다.

2. 이벤트 onmousedown: 마우스 버튼을 누르는 동작을 나타냅니다.
이벤트 oncontextmenu: 마우스를 클릭하면 발생하는 또 다른 이벤트입니다.

3. 기본 이벤트 처리 기능을 중단하는 방법: IE에서 returnValue=false를 설정하고 표준 DOM에서 PreventDefault() 메서드를 호출합니다.

4. 이벤트 객체: ① IE에서 이벤트 객체는 윈도우 객체의 이벤트 속성입니다.

면책조항:

②표준 DOM에서는 이벤트 처리 함수의 유일한 매개변수가 이벤트 객체이다.

면책조항:

호환성 문제 해결:

2. 구현:

< ;p id="p1">고양이 삼촌은 살찐 흰 고양이예요!

컷
>> 🎜>코드 복사

코드는 다음과 같습니다.window.onload=function(){ rightmenu(' p1',' d1');

}

/****
* 오른쪽 클릭 메뉴 기능 캡슐화: 
* elementID 오른쪽 클릭 메뉴를 사용자 정의하는 요소의 ID 
* menuID 표시할 오른쪽 클릭 메뉴 DIv의 ID 
*/
function rightmenu(elementID,menuID){
　var menu=document.getElementById(menuID); 메뉴 객체
 var element=document.getElementById(elementID);//사용자 정의 오른쪽 버튼으로 클릭한 요소 가져오기

element.onmousedown=function(aevent){ //오른쪽 마우스 누르기에 대한 처리 기능 설정 요소의 버튼
if(window.event)aevent=window.event; //호환성 해결
if(aevent.button==2){ //이벤트 속성 버튼의 값이 2인 경우 사용자가 오른쪽 버튼을 눌렀습니다

Document.oncontextmenu=function(aevent){ if(window.event){ aevent=window.event; aevent.returnValue=false; IE 중단을 위한 클릭 이벤트 핸들러 top:' aevent.clientY 'px;' 'left:' aevent.clientX 'px;'　　　//마우스를 기준으로 메뉴 위치 지정　　}

　}

　menu.onmouseout=function(){ //마우스가 메뉴 밖으로 나갈 때 메뉴가 숨겨지도록 설정
　setTimeout(function(){menu.style.display="none";},400) ;
　}
}