마우스 오른쪽 버튼 클릭에 이벤트를 바인딩하고 브라우저의 컨텍스트 메뉴를 억제하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

마우스 오른쪽 버튼 클릭에 이벤트를 바인딩하고 브라우저의 컨텍스트 메뉴를 억제하는 방법은 무엇입니까?

Patricia Arquette

풀어 주다： 2024-12-02 14:40:14

원래의

955명이 탐색했습니다.

How to Bind an Event to a Right Mouse Click and Suppress the Browser's Context Menu?

브라우저 컨텍스트 메뉴를 활성화하지 않고 이벤트를 마우스 오른쪽 버튼 클릭에 바인딩

질문:

특정 작업을 실행하는 방법 마우스 오른쪽 버튼을 클릭하면 기본 브라우저 상황에 맞는 메뉴가 표시되지 않습니다. 나타나는가?

답변:

해결 방법 1: oncontextmenu 이벤트 처리기 사용

jQuery는 내장된 oncontextmenu를 제공하지 않습니다. 이벤트 핸들러. 대신 다음 접근 방식을 사용할 수 있습니다.

$(document).ready(function() {
  document.oncontextmenu = function() { return false; };
});

로그인 후 복사

DOM 요소에서 oncontextmenu 이벤트를 취소하여 브라우저 컨텍스트 메뉴를 비활성화합니다.

해결책 2: jQuery mousedown 이벤트 사용 핸들러

jQuery를 사용하여 mousedown 이벤트를 캡처하고 어떤 버튼이 실행되었는지 확인할 수 있습니다. 누름:

$(document).ready(function() {
  $(document).mousedown(function(e) {
    if (e.button == 2) {
      // Right mouse button clicked
      alert('Right mouse button!');
      return false;
    }
    return true;
  });
});

로그인 후 복사

이 접근 방식은 상황에 맞는 메뉴 비활성화와 마우스 오른쪽 버튼 클릭 감지를 결합합니다.

데모:

다음을 수행할 수 있습니다. 다음 코드 예제를 열고 마우스 오른쪽 버튼을 클릭하여 위 솔루션을 테스트해 보세요.

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $(document).mousedown(function(e) {
        if (e.button == 2) {
          alert('Right mouse button!');
        }
      });
    });
  </script>
</head>
<body>
  <h1>Test Right Mouse Click Event</h1>
</body>
</html>

로그인 후 복사

위 내용은 마우스 오른쪽 버튼 클릭에 이벤트를 바인딩하고 브라우저의 컨텍스트 메뉴를 억제하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!