웹 페이지의 오른쪽 클릭 메뉴를 차단하고 선택 및 복사를 금지하는 JavaScript 및 JQuery에 대한 심층 토론_javascript 기술

동적 HTML과 JavaScript를 처음 접했을 때 마우스 오른쪽 버튼 클릭 차단에 대한 스크립트 코드를 접했던 기억이 납니다. 당시 이러한 코드 중 상당수는 시청자가 텍스트나 기타 내용을 복사하는 것을 방지하는 데 사용되었습니다. 나중에 실제 적용을 통해 이 접근 방식이 사용자 경험에 부합하지 않는다는 것이 입증되었으며 이를 크랙할 수 있는 방법은 여러 가지가 있습니다. 예를 들어, 복사 금지를 제거하는 방법을 설명하는 기사를 쓴 적이 있습니다. 웹 페이지에서.

마우스 오른쪽 버튼 클릭과 복사를 제한하는 것은 현명하지 못한 일이라고 볼 수 있지만, 오늘은 여전히 ​​웹페이지 복사와 마우스 오른쪽 버튼 클릭 메뉴 금지에 대해 이야기하고 싶습니다. 일부 데스크톱 프로그램은 실제로 웹페이지와 자바스크립트로 구현되고, 일부 모바일 애플리케이션도 HTML5 자바스크립트로 구현될 수 있기 때문에 이들 사이의 경계가 점점 모호해지고 있습니다. APP으로서 웹 페이지의 마우스 오른쪽 버튼 클릭 텍스트 선택 및 팝업 메뉴는 대부분의 경우 불필요합니다.

다음 소개에서는 코드의 특정 측면만 다룰 수 있지만 누구나 추론할 수 있을 것이라고 믿습니다.-)

1. 대략적인 버전에서는 복사가 제한되거나 마우스 오른쪽 버튼 클릭이 금지됩니다

먼저 시청자가 웹 페이지에서 텍스트를 복사하는 것을 대략적으로 제한하거나 금지하는 방법에 대해 이야기하겠습니다. , 복사 등이 있으며 이러한 작업은 해당 스크립트 이벤트에 해당합니다. 이러한 이벤트에 메서드를 추가하고 false를 반환하도록 하면 해당 작업을 "먹을" 수 있습니다. 일반적으로 복사를 금지하는 스크립트 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

window.onload = function( ) {
with(document.body) {
oncontextmenu=function(){return false}
ondragstart=function(){return false}
onselectstart=function(){return false}
onbeforecopy=function(){return false}
onselect=function(){document.selection.empty()}
oncopy=function(){document.selection.empty()}
}
}

이 방법을 조잡한 버전으로 부르는 이유는 무엇입니까? 이 방법을 사용하여 마우스 오른쪽 버튼을 비활성화한 후에는 웹 페이지의 모든 컨트롤을 마우스 오른쪽 버튼으로 클릭하거나 선택할 수 없다는 것을 알게 될 것입니다. 웹 페이지가 딱딱한 그림처럼 느껴질 수도 있습니다. , 그러나 입력 및 텍스트 영역 텍스트 상자와 같은 문자 입력 컨트롤의 경우 이와 관련이 많습니다. 이러한 위치는 사용자의 마우스 오른쪽 버튼 클릭 및 복사 선택 작업을 제한할 수 없습니다.

2. 제한할 HTML 태그 요소를 합리적으로 결정

현재 처리된 레이어의 요소 태그를 확인하는 방법, 즉 현재 마우스가 위치한 HTML 태그를 가져오는 방법입니다. 여기서는 실제로 document.body에 전달된 함수를 예로 들어보겠습니다. oncontextmenu에는 생략할 매개변수가 있습니다. 예, 완전한 작성 방법은 document.body.oncontextmenu=function(e){}여야 합니다. 여기서 e는 IE의 window.event를 통해 얻을 수 있는 JavaScript의 Event 개체입니다. 이 이벤트 객체를 통해 이벤트가 트리거될 때 마우스가 있는 HTML 태그를 얻을 수 있습니다. 여기서는 다음과 같은 기능을 제공합니다.

코드 복사 코드는 다음과 같습니다.

var isTagName = function(e, whitelists) {
e = e || window.event;
var target = e.target || e.srcElement;
Array.prototype.contains = function(elem)
{
for ( var i in this) {
if (this [i] .t stand (). Touppercase () == ELEM.TOSTRING (). TOUPPERCASE ()) Return true
}
Return 거짓, >                                                                                                   ~         if (whitelists && !whitelists.contains(target.tagName)) {
         return false;

여기서 e는 이벤트 객체이고, 대상은 이벤트 객체가 참조하는 요소 객체입니다. 물론 여기의 두 변수는 모두 IE와 호환되도록 작성되어 있습니다. Firefox에서 "event.srcElement를 작동시키려면 어떻게 해야 합니까?"에 대한 설명과 그 의미는 무엇입니까?》 여기에 있는 화이트리스트는 ['INPUT', 'TEXTAREA']와 같은 화이트리스트 HTML 요소 태그 이름입니다. 현재 이벤트 요소가 Return true이면 다음 코드를 통해 마우스 오른쪽 버튼을 선택적으로 차단할 수 있도록 상자 입력 및 텍스트 영역이 판단에 추가됩니다. 코드 복사

코드는 다음과 같습니다. document.body.oncontextmenu=function(e){ return isTagName(e, ['A' , '텍스트 영역']);}

3. JQuery 버전의 선택적 차단으로 텍스트 선택이 금지됩니다

마찬가지로 다른 작업도 선택적으로 차단할 수 있습니다. JQuery가 지원되는 환경에서는 StackOverflow에서 "How to disable text Selection using jQuery?"라는 글을 발견했는데, 선택이 금지되어 있다고 설명되어 있습니다. 구체적인 코드는 다음과 같습니다.

코드를 복사하세요.

코드는 다음과 같습니다. (function( $){ $.fn.ctrlCmd = function(key) {

var allowedDefault = true;

if (!$.isArray(key )) {
Key = [key];
}

return this.keydown(function(e) {
for (var i = 0, l = key.length; i < ; l; i ) {
           if(e.keyCode === key[i].toUpperCase().charCodeAt(0) && e.metaKey) {
                                  ~ |
};


$.fn.disableSelection = function() {

this.ctrlCmd(['a', 'c ']);

return this.attr('unselectable', 'on')
.css({'-moz-user-select':'-moz-none',
-moz-user-select':'none ',
'-o-user-select':'none',
'-khtml-user-select':'none',
'-webkit -User-select ':' None ',
' -MS-User-SELECT ':' 없음',
' User-SELECT ':' 없음 '})
.bind (' sexctstart ' false);
};

})(jQuery);

다음 코드를 사용하여 사용하세요.




코드 복사

코드 다음과 같습니다:

$(':not(input,select,textarea)').disableSelection(); 이렇게 하면 입력, 선택, 텍스트 영역을 제외한 선택이 금지될 수 있습니다. 이 코드의 요령은 시작 선택 외에도 관련 요소에 특수 브라우저에서 지원하는 일부 CSS 기능도 추가한다는 것입니다. 대부분의 브라우징 실현 동시에 이 코드는 키보드 키 선택 Ctrl A 및 Ctrl C도 차단합니다. 작성자의 사려 깊은 배려에 감탄해야 합니다. 4. 추가 개선: 마우스 클릭 작업 보호

이 코드를 테스트할 때 발생한 문제는 입력, 선택, 텍스트 영역 이외의 요소를 클릭하면 모든 페이지가 선택된다는 것입니다. 원 작성자는 사용 코드에 .on('mousedown 을 추가하여 간단한 방법을 제공했습니다. .', false)를 사용하여 마우스 클릭을 차단합니다.

코드를 복사합니다

. 다음:

$(':not(input,select,textarea)').disableSelection().on('mousedown', false);

그런데 위의 내용을 적용한 후에 문제가 다시 발생했습니다. 코드, 입력, 선택, 텍스트 영역도 모두 비정상적으로 되기 시작했습니다. 모든 요소에 마우스다운 차단 기능이 적용된 것 같습니다. 이제 생각을 바꿔 방금 제안한 솔루션을 결합하여 이벤트 개체를 선택적으로 보호하도록 했습니다.

코드 복사 코드는 다음과 같습니다:

$(':not(input,select,textarea)').disableSelection().on('mousedown', function(e) {
var event = $.event.fix(e);
var elem = event.target || e.srcElement;
if (elem.tagName.toUpperCase() != 'TEXTAREA' && elem. tagName.toUpperCase() != 'INPUT') {
e.preventDefault();
return false;
}
return true;
});

이것은 텍스트 영역과 입력이 아닌 방식으로 Mousedown이 제한됩니다.

코드 복사 코드는 다음과 같습니다. 다음:

function jQuery_isTagName(e, 화이트리스트) {
e = $.event.fix(e);
var target = e.target || > if (whitelists && $.inArray( target.tagName.toString().toUpperCase(), whitelists) == -1) {
               return false(input,select,textarea)').disableSelection(). on('mousedown', function(e) {
if (!jQuery_isTagName(e, ['INPUT', 'TEXTAREA'])) {
e.preventDefault();
return false;
}
true를 반환합니다.
});



5. JQuery 버전의 선택적 차단으로 인해 마우스 오른쪽 버튼이 금지됩니다

오른쪽 클릭 메뉴의 경우 다음과 같이 처리할 수 있습니다.

코드 복사

코드는 다음과 같습니다. $(document).bind("contextmenu",function(e){ if (!jQuery_isTagName(e, ['INPUT', 'TEXTAREA'])) { e.preventDefault(); false 반환;

}

true 반환;
});