일부 사이트에서 사진을 마우스 오른쪽 버튼으로 클릭해도 작동하지 않습니다. 마치 버튼이 유휴 상태 인 것처럼 보이고 브라우저는 버튼에 신경 쓰지 않습니다. 실제로 브라우저는로드 된 페이지의 JavaScript 스크립트에서 이러한 명령을 수신 할 때 클릭을 차단합니다.
어떻게 오른쪽 버튼 잠금 해제오프라인에서 볼 수 있도록 사진을 클릭하여 저장 하시겠습니까? 대부분의 인터넷 브라우저에서는 고급 설정에서 "발굴"하기에 충분합니다. 자바 스크립트 .. 그래서…
당신이 가지고 있다면 " 오페라»:
1. "도구"-\u003e "일반 설정"경로를 따르십시오.
2. 표시되는 창에서 "Content"항목을 중지하고 "JavaScript 구성"단추를 찾으십시오 (그림 1 참조).
3. 클릭하여 자세한 JavaScript 설정을위한 창을 열고 "오른쪽 버튼 차단"행 옆의 상자를 선택 취소하십시오.
확인 후 ( "확인"클릭)이 버튼은 상황에 맞는 메뉴 호출시 "무료"가됩니다. 그건 그렇고, " Firefox»오른쪽 버튼의 잠금을 해제하려면이 항목 옆의 상자를 선택 해제해야합니다 (그림 2 참조).
다른 고급 브라우저에서는 동일한 고급 JavaScript 설정을 통해 동일한 방식으로 오른쪽 버튼 차단이 제거됩니다.
목표 : 브라우저 창에서 마우스 오른쪽 버튼을 클릭하여 컨텍스트 메뉴를 표시합니다.
브라우저 창에서 마우스 오른쪽 버튼을 클릭하면 어떻게됩니까? 상황에 맞는 메뉴가 나타납니다. 모양과 기능 세트는 브라우저 유형과 클릭 한 위치에 따라 다릅니다.
그러나 브라우저 컨텍스트 메뉴를 차단하고 자체 메뉴를 표시하려면 어떻게해야합니까? 아마도? 예. 불행히도 크로스 브라우저는 아니지만 아래 코드는 Gecko, Safari 및 IE에서 작동합니다. Opera는 기본적으로 이러한 기능을 제공하지 않습니다.
먼저, 3 개의 DIV를 그려 보자. 그 중 2 개에는 자체 컨텍스트 메뉴가 표시되고 3 번째에는 기본 브라우저 하나를 그대로 둡니다.
보시다시피, 오른쪽 버튼 클릭을 잡는 것은 이벤트를 사용하여 발생합니다 상황에 맞는 메뉴... 메뉴 기능에 대한 코드를 작성하려면 다음 구성 요소가 필요합니다.
-이벤트 핸들러 추가 기능. 문서의 다른 부분을 클릭 할 때 고유 한 상황에 맞는 메뉴를 숨기는 데 사용됩니다.
-마우스 포인터의 좌표를 결정하는 기능. 상황에 맞는 메뉴를 표시 할 위치를 정의하는 데 사용됩니다.
단순히 false를 반환하여 표준 브라우저 메뉴의 팝업을 차단할 수 있습니다.
이제 코드 :
// 마우스 포인터의 좌표를 결정하는 기능
함수 defPosition (이벤트) (
var x \u003d y \u003d 0;
if (document.attachEvent! \u003d null) (// Internet Explorer 및 Opera
x \u003d window.event .clientX + (document.documentElement .scrollLeft? document.documentElement .scrollLeft : document.body .scrollLeft);
y \u003d window.event .clientY + (document.documentElement .scrollTop? document.documentElement .scrollTop : document.body .scrollTop);
) else if (! document.attachEvent && document.addEventListener) (// Gecko
x \u003d event.clientX + window.scrollX;
y \u003d event.clientY + window.scrollY;
) 그 외 (
// 아무것도하지 마세요
}
리턴 (x : x, y : y);
}
기능 메뉴 (유형, evt) (
// 컨텍스트 메뉴 이벤트의 버블 링 차단
evt \u003d evt || window.event;
evt.cancelBubble \u003d true;
// 자체 컨텍스트 메뉴 표시
var menu \u003d document.getElementById ( "contextMenuId");
var html \u003d "";
스위치 (유형) (
사례 (1) :
html \u003d "첫 번째 DIV 메뉴";
html + \u003d "
첫 번째 기능 ";
html + \u003d "
두 번째 기능 ";
html + \u003d "
세 번째 기능 ";
단절;
사례 (2) :
html \u003d "두 번째 DIV 메뉴";
html + \u003d "
(빈)"
;
단절;
기본:
// 아무것도
단절;
}
// 보여줄 것이 있으면 보여줘
if (html) (
menu.innerHTML \u003d html;
menu.style .top \u003d defPosition (evt) .y + "px";
menu.style .left \u003d defPosition (evt) .x + "px";
menu.style .display \u003d "";
}
// 표준 브라우저 메뉴의 팝업을 차단
거짓을 반환;
}
// 문서를 왼쪽 또는 오른쪽 클릭하면 컨텍스트를 닫습니다.
// 이벤트 핸들러 추가 기능
addHandler 함수 (객체, 이벤트, 핸들러, useCapture) (
if (object.addEventListener) (
object.addEventListener (이벤트, 핸들러, useCapture? useCapture : false);
) else if (object.attachEvent) (
object.attachEvent ( "on"+ 이벤트, 핸들러);
) else alert ( "추가 핸들러는 지원되지 않습니다.")
;
}
addHandler (문서, "contextmenu", 함수 () (
}
)
;
addHandler (문서, "클릭", 함수 () (
document.getElementById ( "contextMenuId") .style .display \u003d "없음";
}
)
;
이 튜토리얼에서는 거의 언급되지 않은 HTML5 트릭-컨텍스트 메뉴를 살펴 보겠습니다. 이전에는 이러한 메뉴에 대해 들어 본 적이 없지만 상황에 따라 매우 유용 할 수 있습니다.
contextmenu 속성은 무엇입니까? Javascript가 비활성화되어 있어도 몇 줄의 HTML 코드로 브라우저의 마우스 오른쪽 버튼 클릭 컨텍스트 메뉴에 다양한 옵션을 추가 할 수 있습니다. 현재 이러한 편리한 도구는 Firefox에서만 사용할 수 있습니다.
이것이 작동하는 방식입니다.
상황에 맞는 메뉴를 사용하는 것이 언뜻보기보다 훨씬 쉽습니다. contextmenu 속성을 추가해야합니다.
그런 다음 메뉴를 만듭니다.
id 속성은 contextmenu 속성과 일치해야합니다. 따라서 페이지의 다른 부분에 대해 다른 상황에 맞는 메뉴를 사용할 수 있습니다.
그런 다음 메뉴 항목을 추가합니다. 먼저 텍스트와 아이콘이있는 메뉴 항목을 삽입 한 다음 Facebook에서 현재 페이지를 브로드 캐스트하는 링크를 추가하고 마지막으로 링크를 삽입하여 페이지를 새로 고치십시오. 세 가지 항목으로 구성된 상황에 맞는 메뉴가 나타납니다.
하위 메뉴를 만들 수도 있습니다.
매우 흥미롭고 유용한 HTML5 속성입니다. 그러나 사용은 Firefox 브라우저로만 제한됩니다.
상황에 맞는 메뉴는 화면을 마우스 오른쪽 버튼으로 클릭하면 나타나는 메뉴입니다. 일반적으로 이러한 메뉴는 폴더 및 파일 정렬, 새 응용 프로그램 창 열기 또는 시스템 설정 액세스와 같은 선택된 작업을보다 쉽게 \u200b\u200b수행하는 데 사용됩니다.
수년 동안 "컨텍스트 메뉴"라는 용어는 기본적으로 기본 응용 프로그램을 나타냅니다. 그러나 이제 웹 응용 프로그램에서도이 기능을 활용할 수 있습니다. Gmil의 파일 관리자가 그 예입니다. 이 메뉴는 자바 스크립트 코드를 사용하여 구현됩니다.
앞으로 HTML5 기반 사이트에 대한 상황에 맞는 메뉴를 만들 수 있습니다. 이 접근 방식에 익숙해 지도록 초대합니다.
상황에 맞는 메뉴 개발
HTML5는 2 가지 새로운 요소 인 메뉴와 메뉴 항목을 도입했으며 상황에 맞는 메뉴를 만들 수 있습니다. 브라우저가 메뉴 요소를 "컨텍스트 메뉴"로 취급하려면 메뉴 유형을 컨텍스트로 설정하고 고유 한 ID를 제공해야합니다.
다음은 이러한 속성으로 상황에 맞는 메뉴를 만드는 예입니다.
다음과 같이 메뉴 요소를 포크하여 하위 메뉴를 추가 할 수도 있습니다.
마우스 오른쪽 버튼을 클릭 할 때 컨텍스트 메뉴가 화면에 나타나도록하려면 contextmenu라는 새로운 HTML 속성을 사용합니다. 이 속성은 지정된 ID로 메뉴를 식별하는 데 사용됩니다. 위의 예에서 contextmenu \u003d context-menu-id로 컨텍스트 메뉴를 정의 할 수 있습니다.
페이지 전체에서 컨텍스트 메뉴를 사용하려는 경우 body 태그에 속성을 설정할 수 있습니다. 또한이 메뉴가이 요소 내에서만 사용되도록 HTML 요소에 추가 할 수도 있습니다.
아래 예와 같이 새 상황에 맞는 메뉴가 운영 체제 메뉴에 나타납니다.
아이콘 추가
많은 사람들이 아이콘을 사용하는 상황에 맞는 메뉴를 보았습니다. 경우에 따라 아이콘은 사용자가 메뉴를 찾는 데 도움이되는 훌륭한 시각 도구가 될 수 있습니다. 또한 사용자에게 메뉴의 내용을 이해할 수있는 기능도 제공합니다.
icon 속성을 사용하여 HTML5 컨텍스트 메뉴에 아이콘을 추가 할 수도 있습니다.
이것이 브라우저 창에 표시됩니다.
메뉴 작동
이때 새 컨텍스트 메뉴를 클릭하면 작동하지 않습니다. 그러나 약간의 자바 스크립트 코드로 쉽게 구현할 수 있습니다. 이 예에서는 메뉴를 전자 메일 선택이라고합니다. 이 메뉴를 통해 사용자는 이메일을 통해 선택한 텍스트를 보낼 수 있습니다.
작동하게하려면 사용자가 코드 숨김을 사용할 수있는 기능을 추가하십시오.
getSelectedText 함수 () (
var text \u003d "";
if (window.getSelection) (
text \u003d window.getSelection (). toString ();
) else if (document.selection && document.selection.type! \u003d "Control") (
text \u003d document.selection.createRange () 텍스트;
}
텍스트를 반환;
};
그런 다음 sendEmail ()이라고 가정하고 전자 메일 클라이언트를 여는 다른 함수를 만듭니다. 문자의 제목은 문서 머리글에서 입력 한 텍스트가되고 문자의 본문은 선택한 텍스트로 채워집니다.
sendEmail 기능 () (
var bodyText \u003d getSelectedText ();
window.location.href \u003d "mailto :? subject \u003d"+ document.title + "& body \u003d"+ bodyText + "";
};
마지막으로 onclick 속성을 통해이 기능을 메뉴에 추가합니다.
이전에 HTML5 EditableContent를 사용하는 방법을 보여주었습니다.이를 통해 웹 컨텐츠를 페이지에서 바로 편집 할 수 있습니다. 이 기능을“컨텐츠 편집”이라는 메뉴에 추가하면이 기능을 사용할 수 있습니다.
결론적으로
개인적으로 우리는이 새로운 기능에 매우 만족합니다. 우리는 그 안에 많은 가능성을 봅니다. 불행하게도,이 글을 쓰는 시점에서 Firefox만이이 기능을 지원합니다. 다른 브라우저에서도 곧 연결될 것입니다.
아래에서 데모를 볼 수 있습니다 (Firefox에서만 작동).
모든 장치의 작동 성 실패, 고장의 경우 항상 전문가에게 전화를 걸 필요는 없으며 때로는 높은 가격으로 서비스 비용을 지불합니다. 많은 결함, 오류는 스스로 해결할 수 있습니다. 이러한 종류의 충돌은 마우스 오른쪽 버튼으로 컨텍스트 메뉴를 열지 않을 때 발생하는 오류를 포함합니다. 그러한 경우 어떻게해야합니까?
먼저 실패 원인, Windows 10 상황에 맞는 메뉴가 작동하지 않는 이유를 찾아야합니다. 여기에는 몇 가지 가능한 이유가 있습니다.
- 더 이상 사용되지 않는 파일이있는 복잡한 레지스트리;
- 상황에 맞는 메뉴에 포함 된 프로그램의 부재, 불안정한 작업.
마우스 오른쪽 버튼으로 상황에 맞는 메뉴가 열리지 않을 때 상황을 변경하는 방법, 이러한 경우에 수행 할 작업을 고려해 봅시다.
레지스트리가 더 이상 사용되지 않는 파일로 인해 마우스 오른쪽 단추 클릭 상황에 맞는 메뉴가 표시되지 않으면 청소를 위해 Glary Utilities와 같은 유틸리티를 사용하는 것이 좋습니다. Glary Utilities는 PC 성능을 보호, 조정 및 개선하는 데 유용한 유틸리티 인 일련의 시스템 조정기입니다. 이 세트를 사용하면 시스템을 방해하는 불필요한 파일, 오래된 레지스트리 항목, RAM 최적화, 시작 관리, 메모리 최적화 및 컴퓨터의 우수한 기능에 유용한 기타 기능을 삭제할 수 있습니다. Glary Utilities는 무료로 다운로드 할 수 있습니다.
설정을 설정 한 후에는 동일한 유틸리티를 사용하여 불필요한 파일을 장치에서 정리하고 레지스트리를 정리하여 컴퓨터 속도를 높이십시오.
버그 수정 중지
파일, 폴더를 마우스 오른쪽 버튼으로 클릭 할 때 바탕 화면의 상황에 맞는 메뉴가 작동하지 않고 컴퓨터가 정지하고 키가 명령에 응답하지 않는 경우이 정지를 두 가지 방법으로 제거 할 수 있으므로 두 가지 방법을 모두 순서대로 수행하는 것이 좋습니다. 이들 중 하나를 진행하기 전에 관리자 권한이 있어야합니다. 레지스트리를 사용하여 작업해야합니다. 여기에서주의해야합니다. 무언가 잘못하면 시스템이 중단 될 수 있습니다. 따라서 오류 수정 프로세스를 시작할 때 항목을 삭제하기 전에 시스템 복원 지점을 작성하십시오.
"둔한"정지는 일반적으로 불안정한 프로그램, 정지 된 프로그램 또는 상황에 맞는 메뉴의 링크가 존재하지 않는 리소스를 가리킬 때 발생합니다.
방법 1
순서대로 단계를 수행하십시오.
- 이미 제거한 프로그램의 목록을 확인하십시오.
- 목록에 제거한 프로그램이 있으면 레지스트리에서 제거하십시오. 레지스트리 키를 삭제하기 전에 복원해야 할 경우를 대비하여 백업 할 백업 복사본을 만드는 것이 좋습니다.
방법 2
Windows 10 상황에 맞는 메뉴가없는 경우 두 번째 방법의 알고리즘은 다음과 같습니다.
- 이전 방법의 1-2 단계에서 설명한대로 레지스트리 편집기를 엽니 다.
- HKEY_CLASSES_ROOT 하위 키를 엽니 다.
- "name_programm.exe", "name_programm.dll"와 같은 이름을 가진 여러 하위 섹션이 있습니다. LMB를 클릭하여 "command"하위 섹션을 하나씩 확인하십시오. 모든 하위 섹션이 열려 있어야합니다. 열리지 않으면 창의 오른쪽에서 "NoOpenWith"매개 변수를 찾으십시오. 그러한 매개 변수가 없습니다. 작성하십시오. 왜 다음을 수행합니까?
- "command"하위 섹션을 찾았 으면 LMB를 클릭하고 오른쪽에 "(기본값)"매개 변수가 있는지 확인하십시오. 이 매개 변수는 컴퓨터에있는 응용 프로그램 또는 네트워크 리소스에 할당해야합니다.
- 매개 변수가 이미 누락 된 자원을 참조하는 경우이 자원 또는 프로그램 이름으로 시작하는 전체 섹션을 삭제해야합니다. 필요한 경우 복구를 위해 삭제하기 전에 백업 사본을 작성하는 것을 잊지 마십시오. 마우스 오른쪽 버튼으로 섹션 이름을 클릭 한 다음 "삭제"- "예"를 클릭하여 삭제하십시오.
두 가지 방법을 완료하면 상황에 맞는 메뉴가 열리고 RMB가 파일을 클릭하면 PC 정지가 중지됩니다.
상황에 맞는 메뉴가 작동하는 것은 어렵지 않습니다. 레지스트리를 변경하려고 시도하면 PC가 불안정하게 작동 할 수 있으므로 복원 지점을 만들고 제거 할 프로그램의 아카이브 사본을 잊지 마십시오. 마우스 오른쪽 버튼으로 상황에 맞는 메뉴를 열지 않으면 위의 지침을 순서대로 따르고 모든 방법을 적용하면 오류가 수정됩니다.
