웹 페이지에 사용자 정의 오른쪽 클릭 메뉴를 추가하는 방법은 무엇입니까?

요즘에는 웹 페이지를 마우스 오른쪽 버튼으로 클릭하면 몇 가지 옵션과 기능이 포함된 목록이 나타납니다. 이 팝업 메뉴는 브라우저에서 제공하는 기본 팝업 메뉴로 컨텍스트 메뉴라고도 합니다. 이 메뉴 목록의 항목은 브라우저마다 다릅니다. 일부 브라우저는 더 많은 기능을 제공하는 반면 다른 브라우저는 제한된 기능을 제공합니다.

하지만 웹 페이지에 사용자 정의 컨텍스트 메뉴나 마우스 오른쪽 버튼 클릭 메뉴를 추가하는 방법이 있습니다. 원하는 만큼 많은 옵션을 추가할 수 있습니다. 그러나 사용자 정의 상황에 맞는 메뉴를 추가하려면 먼저 기본 상황에 맞는 메뉴를 여는 웹 페이지의 기본 마우스 오른쪽 버튼 클릭 동작을 변경해야 합니다. 사용자 정의 상황에 맞는 메뉴를 추가하려면 다음 두 단계가 필요합니다.

• 기본 오른쪽 클릭 메뉴를 표시하는 기본 동작을 변경합니다.

• 저희만의 맞춤 컨텍스트 메뉴를 추가하고 마우스 오른쪽 버튼을 클릭하여 웹페이지에 표시하세요.

이제 실제 코드 예시를 통해 위의 두 단계를 단계별로 자세히 이해해 보겠습니다.

기본 상황에 맞는 메뉴 제거 또는 숨기기

웹 페이지를 마우스 오른쪽 버튼으로 클릭할 때 사용자 정의 컨텍스트 메뉴를 표시하려면 먼저 preventDefault() 메서드가 포함된 함수를 document.oncontextmenu 이벤트에 할당하여 기본 컨텍스트 메뉴를 제거하거나 숨겨야 합니다. 사용자가 웹 페이지를 마우스 오른쪽 버튼으로 클릭할 때 이 함수를 호출하는 마우스 오른쪽 버튼 클릭의 기본 동작입니다.

기본 컨텍스트 메뉴 숨김을 방지하는 기본 동작의 실제 구현에 대해 논의해 보겠습니다.

단계

• 1단계 − 첫 번째 단계에서는 HTML 문서를 만들고 코드를 테스트하기 위한 웹 페이지를 만듭니다.

• 2단계 - 전체 웹 페이지를 마우스 오른쪽 버튼으로 클릭하면 메뉴가 팝업되므로 이 단계에서는 HTML 문서에 oncontextmenu 이벤트를 추가하겠습니다.

• 3단계 - 마지막 단계에서는 기본 컨텍스트 메뉴가 표시되지 않도록 방지Default() 메서드를 사용하여 JavaScript 함수를 정의하거나 false를 반환합니다.

예

아래 예에서는 기본 상황에 맞는 메뉴의 기본 동작을 변경하고 숨기는 방법을 보여줍니다−

위 예에서는 preventDefault() 메서드를 사용하여 기능을 할당하여 페이지를 마우스 오른쪽 버튼으로 클릭할 때 기본 컨텍스트 메뉴 기능을 제거하거나 숨기는 방법을 살펴보았습니다.

이제 사용자 정의 컨텍스트 메뉴를 추가하고 페이지를 마우스 오른쪽 버튼으로 클릭할 때 표시되도록 하는 방법을 이해하겠습니다.

단계

• 1단계 - 첫 번째 단계에서는 상황에 맞는 메뉴에 표시되고 표시되어야 하는 항목 목록을 만듭니다. 없음 기본적으로 페이지를 마우스 오른쪽 버튼으로 클릭하는 경우에만 표시됩니다.

• 2단계 - 다음 단계에서는

• 3단계 - 마지막 단계에서는 사용자 정의 메뉴에 JavaScript 기능을 추가하여 사용자가 페이지를 마우스 오른쪽 버튼으로 클릭한 후 웹 페이지에 표시합니다.

예

다음 예에서는 기본 컨텍스트 메뉴가 표시되지 않도록 하는 방법과 사용자 정의 컨텍스트 메뉴를 추가하고 표시하는 방법을 보여줍니다. −

이 예에서는 페이지를 마우스 오른쪽 버튼으로 클릭하면 클릭할 때 커서 위치에 기본 컨텍스트 메뉴를 숨기고 자체 생성된 컨텍스트 메뉴를 표시합니다.

결론

이 기사에서는 웹 페이지를 마우스 오른쪽 버튼으로 클릭할 때 기본 컨텍스트 값을 제거하거나 숨기고 동일한 작업에서 사용자 정의 컨텍스트 메뉴를 표시하는 방법을 배웠습니다. 이러한 방식으로 표시하려는 옵션이 포함된 사용자 정의 상황에 맞는 메뉴를 추가할 수 있습니다.

위 내용은 웹 페이지에 사용자 정의 오른쪽 클릭 메뉴를 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!