> 웹 프론트엔드 > 프런트엔드 Q&A > jquery를 사용하여 이미지의 오른쪽 클릭 메뉴를 비활성화하는 방법에 대해 이야기해 보겠습니다.

jquery를 사용하여 이미지의 오른쪽 클릭 메뉴를 비활성화하는 방법에 대해 이야기해 보겠습니다.

PHPz
풀어 주다: 2023-04-10 10:30:19
원래의
843명이 탐색했습니다.

웹페이지의 특정 이미지에 대한 마우스 오른쪽 버튼 클릭 메뉴를 비활성화하려는 사용자의 경우 일부 JQuery 코드를 통해 비활성화할 수 있습니다. 이 기사에서는 JQuery를 사용하여 이미지 오른쪽 클릭 메뉴를 비활성화하는 데 도움이 되는 몇 가지 방법을 소개합니다.

먼저 JQuery 라이브러리를 가져와야 합니다. HTML 헤드 태그에 다음 코드를 추가합니다.

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
로그인 후 복사

다음으로 오른쪽 클릭 메뉴를 비활성화해야 하는 이미지의 ID 또는 클래스를 찾아야 합니다. 비활성화하려는 이미지의 ID가 myImage라고 가정합니다. . JQuery에서 오른쪽 클릭 메뉴를 비활성화하는 코드는 다음과 같습니다.

$("#myImage").on("contextmenu", function() {
return false;
});
로그인 후 복사

그에 따라 비활성화해야 하는 것이 이미지 그룹의 클래스인 경우 코드는 다음과 같습니다.

$(".myImage").on("contextmenu", function() {
return false;
});
로그인 후 복사

첫 번째 코드 줄에서는 JQuery Selector를 사용하여 특정 ID 또는 클래스가 있는 이미지를 선택합니다. 다음으로 JQuery에서 "contextmenu" 이벤트를 적용하고 이를 선택한 이미지에 할당합니다. 이 예에서는 return false를 사용하여 표시되어야 하는 오른쪽 클릭 메뉴를 취소하도록 브라우저에 지시합니다. 이벤트 이름 "contextmenu"는 소문자로 작성되어 다른 이벤트 이름을 작성하는 방식과 다릅니다.

마지막으로 전체 JQuery 코드 블록 외부에서 문서가 로드된 후 코드가 실행되도록 코드를 준비된 함수 안에 넣어야 합니다. 코드는 다음과 같이 작성할 수 있습니다.

$(document).ready(function() {
  $("#myImage").on("contextmenu", function() {
    return false;
  });
});
로그인 후 복사

여기서는 문서의 모든 요소가 로드된 후 실행되는 jQuery의 Ready() 함수에 필요한 매개변수로 익명 함수를 사용합니다.

요약하자면, 이미지의 오른쪽 클릭 메뉴를 비활성화하는 JQuery의 코드는 다음과 같습니다:

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $(&quot;#myImage&quot;).on(&quot;contextmenu&quot;, function() {
    return false;
  });
});
</script>
로그인 후 복사

HTML 코드에서 myImage를 오른쪽 클릭을 비활성화하려는 이미지의 ID 또는 클래스로 바꿉니다. 메뉴. 이제 JQuery를 사용하여 특정 이미지의 오른쪽 클릭 메뉴를 비활성화하는 방법을 배웠습니다. 이 기사가 도움이 되었기를 바랍니다.

위 내용은 jquery를 사용하여 이미지의 오른쪽 클릭 메뉴를 비활성화하는 방법에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿