자바스크립트 비활성화 선택

웹 개발 시 불법 복제 등의 위험에 노출되지 않도록 사용자가 웹 페이지의 특정 요소를 선택하는 것을 금지해야 하는 경우가 있습니다. 이때 Javascript의 매우 실용적인 기능인 선택 비활성화가 장점을 보여줍니다.

선택 비활성화는 웹페이지에서 요소를 선택한 후 브라우저가 이 요소의 텍스트와 기타 콘텐츠를 클립보드에 복사하지 않는다는 것을 의미합니다. Javascript는 이 기능을 매우 쉽게 구현할 수 있습니다.

메소드는 다음과 같습니다:

// 防止选中文本
function disableSelection(element) {
    if (typeof element.onselectstart != 'undefined') {
        element.onselectstart = function() { return false; };
    } else if (typeof element.style.MozUserSelect != 'undefined') {
        element.style.MozUserSelect = 'none';
    } else {
        element.onmousedown = function() { return false; };
    }
}
// 调用示例
disableSelection(document.body);

이 함수의 기능은 전달된 요소 변수의 선택을 비활성화하는 것입니다. 요소에 onselectstart 속성이 설정된 경우 기본 선택 이벤트가 실행되지 않도록 하려면 해당 속성을 false로 설정하세요. 속성이 없으면 계속해서 MozUserSelect 속성이 있는지 확인하세요. 이 속성도 존재하지 않으면 요소의 onmousedown을 false로 설정합니다.

일부 특정 요소가 선택되는 것을 방지하려면 신중하게 선택 가능한 클래스를 요소에 추가하고 클래스의 MozUserSelect 속성을 재정의할 수 있습니다.

코드 예시는 다음과 같습니다.

.careful-selectable {
    -moz-user-select: text !important;
    -webkit-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}

위 코드에서 특정 클래스의 속성은 !important로 설정되어 요소가 어떻게 설정되더라도 선택되지 않습니다. 사용자 선택 속성을 설정하면 텍스트는 선택 가능하지만 마우스 오른쪽 버튼 클릭 복사는 금지되는 등의 다른 기능도 구현할 수 있습니다.

선택을 비활성화할 수 있을 뿐만 아니라 Javascript는 이벤트 핸들러를 통해 복사 및 자르기도 비활성화할 수 있습니다.

코드는 다음과 같습니다.

// 防止复制和剪切
function disableCopyAndCut(element) {
    element.addEventListener('copy', function(e) {
        e.preventDefault();
        console.log('禁止复制！');
    });
    element.addEventListener('cut', function(e) {
        e.preventDefault();
        console.log('禁止剪切！');
    });
}
// 调用示例
disableCopyAndCut(document.body);

위 코드에서는 먼저 요소 매개변수를 전달한 다음 요소의 복사 및 잘라내기 이벤트에 대한 리스너를 각각 추가합니다. 두 경우 모두 방지Default() 메서드를 사용하여 기본 동작이 트리거되는 것을 방지하여 복사 및 자르기를 비활성화합니다.

간단히 말하면 Javascript에서 선택, 복사, 잘라내기와 같은 작업을 비활성화하는 것은 매우 간단합니다. 특정 요소에 대한 일부 속성이나 이벤트 핸들러만 설정하면 됩니다. 웹 페이지를 개발할 때 저작권, 개인 정보 보호 등 민감한 정보가 관련된 경우 선택을 비활성화하는 등의 작업이 필수적입니다.

위 내용은 자바스크립트 비활성화 선택의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!