[javascript] Chrome에서 HTML 요소를 검사 할 수 있도록 오른쪽 클릭을 다시 활성화하는 방법은 무엇입니까?

Program / 글쓴이

자체 팝업 HTML 요소를 표시하기 위해 오른쪽 클릭 버튼을 덮어 쓴 웹 페이지를보고 있습니다.

이로 인해 Chrome 개발자 도구를 사용하여 요소를 검사 할 수 없습니다.

Chrome 콘솔에서 삽입하여 오른쪽 클릭을 다시 활성화 할 수있는 JavaScript 스 니펫을 아는 사람이 있습니까?

HTML 요소를 쉽게 검사 할 수 있도록 기존의 ‘오른쪽 클릭’기능을 중단해도 괜찮습니다.

감사.

답변

oncontextmenu핸들러를 방금 변경 한 경우 (가장 간단한 방법) 다음과 같이 오버라이드를 제거 할 수 있습니다.

window.oncontextmenu = null;

그렇지 않고 개별 요소에 첨부 된 경우 페이지의 모든 요소를 ​​가져온 다음 각 요소에서 핸들러를 제거 할 수 있습니다.

var elements = document.getElementsByTagName("*");
for(var id = 0; id < elements.length; ++id) { elements[id].oncontextmenu = null; }

또는 그러한 스크립트를 끌 수있는 것 같습니다. Chrome의 확장 프로그램 또는 Firefox 의 옵션을 통해 -자바 스크립트 옵션의 고급 상자에서 ‘컨텍스트 메뉴 비활성화 또는 바꾸기’를 끕니다.

답변

Chrome 60.0.3112.78에서 테스트되었습니다.

위의 방법 중 일부는 작동하지만 내 생각에는 가장 쉬운 방법은 다음과 같습니다.

  1. 개발 도구를 엽니 다 (Shift + Control + i).

  2. “요소”탭을 선택한 다음 “이벤트 리스너”탭을 선택하십시오.

  3. 요소 / 리스너 위로 마우스를 가져갑니다. “제거”버튼이 나타납니다.

  4. “제거”를 클릭하십시오.

예 : 사진 참조.

이벤트 리스너 제거

답변

가장 쉬운 방법은 Cmd + Opt + I (Mac) 또는 F12 (PC)를 눌러 개발 도구를 여는 것입니다. 그런 다음 검색 (확대경, 개발 도구 도구 모음의 왼쪽 상단)을 사용하여 요소를 선택할 수 있습니다.

답변

이 책자는 2019 년 8 월 현재 Google 사이트 / YouTube에서 작동합니다 (Chrome 및 Firefox에서 테스트 됨).

javascript: function enableContextMenu(aggressive = false) { void(document.ondragstart=null); void(document.onselectstart=null); void(document.onclick=null); void(document.onmousedown=null); void(document.onmouseup=null); void(document.body.oncontextmenu=null); enableRightClickLight(document); if (aggressive) { enableRightClick(document); removeContextMenuOnAll("body"); removeContextMenuOnAll("img"); removeContextMenuOnAll("td"); } } function removeContextMenuOnAll(tagName) { var elements = document.getElementsByTagName(tagName); for (var i = 0; i < elements.length; i++) { enableRightClick(elements[i]); } } function enableRightClickLight(el) { el || (el = document); el.addEventListener("contextmenu", bringBackDefault, true); } function enableRightClick(el) { el || (el = document); el.addEventListener("contextmenu", bringBackDefault, true); el.addEventListener("dragstart", bringBackDefault, true); el.addEventListener("selectstart", bringBackDefault, true); el.addEventListener("click", bringBackDefault, true); el.addEventListener("mousedown", bringBackDefault, true); el.addEventListener("mouseup", bringBackDefault, true); } function restoreRightClick(el) { el || (el = document); el.removeEventListener("contextmenu", bringBackDefault, true); el.removeEventListener("dragstart", bringBackDefault, true); el.removeEventListener("selectstart", bringBackDefault, true); el.removeEventListener("click", bringBackDefault, true); el.removeEventListener("mousedown", bringBackDefault, true); el.removeEventListener("mouseup", bringBackDefault, true); } function bringBackDefault(event) { event.returnValue = true; (typeof event.stopPropagation === 'function') && event.stopPropagation(); (typeof event.cancelBubble === 'function') && event.cancelBubble(); } enableContextMenu();

페 스키어 사이트의 경우 공격적을 true로 설정 / 전달합니다 (이렇게하면 대부분의 이벤트 핸들러가 비활성화되므로 페이지와의 상호 작용이 비활성화됩니다).

javascript: function enableContextMenu(aggressive = true) { void(document.ondragstart=null); void(document.onselectstart=null); void(document.onclick=null); void(document.onmousedown=null); void(document.onmouseup=null); void(document.body.oncontextmenu=null); enableRightClickLight(document); if (aggressive) { enableRightClick(document); removeContextMenuOnAll("body"); removeContextMenuOnAll("img"); removeContextMenuOnAll("td"); } } function removeContextMenuOnAll(tagName) { var elements = document.getElementsByTagName(tagName); for (var i = 0; i < elements.length; i++) { enableRightClick(elements[i]); } } function enableRightClickLight(el) { el || (el = document); el.addEventListener("contextmenu", bringBackDefault, true); } function enableRightClick(el) { el || (el = document); el.addEventListener("contextmenu", bringBackDefault, true); el.addEventListener("dragstart", bringBackDefault, true); el.addEventListener("selectstart", bringBackDefault, true); el.addEventListener("click", bringBackDefault, true); el.addEventListener("mousedown", bringBackDefault, true); el.addEventListener("mouseup", bringBackDefault, true); } function restoreRightClick(el) { el || (el = document); el.removeEventListener("contextmenu", bringBackDefault, true); el.removeEventListener("dragstart", bringBackDefault, true); el.removeEventListener("selectstart", bringBackDefault, true); el.removeEventListener("click", bringBackDefault, true); el.removeEventListener("mousedown", bringBackDefault, true); el.removeEventListener("mouseup", bringBackDefault, true); } function bringBackDefault(event) { event.returnValue = true; (typeof event.stopPropagation === 'function') && event.stopPropagation(); (typeof event.cancelBubble === 'function') && event.cancelBubble(); } enableContextMenu();

답변

마우스 오른쪽 버튼을 다시 활성화하려면 다음 코드를 사용할 수 있습니다.

document.oncontextmenu = function(){}

바로 가기 키 (Ctrl + Shift + i)를 사용하여 Windows OS의 크롬에서 요소 검사를 열 수 있습니다.

답변

@Chema 솔루션을 기반으로 재설정 pointer-events및 user-select. none이미지 에 대해 로 설정된 경우 마우스 오른쪽 버튼으로 클릭해도 이미지를 보거나 저장할 수있는 옵션이있는 컨텍스트 메뉴가 호출되지 않습니다.

javascript:function enableContextMenu(aggressive = true) { void(document.ondragstart=null); void(document.onselectstart=null); void(document.onclick=null); void(document.onmousedown=null); void(document.onmouseup=null); void(document.body.oncontextmenu=null); enableRightClickLight(document); if (aggressive) { enableRightClick(document); removeContextMenuOnAll('body'); removeContextMenuOnAll('img'); removeContextMenuOnAll('td'); } } function removeContextMenuOnAll(tagName) { var elements = document.getElementsByTagName(tagName); for (var i = 0; i < elements.length; i++) { enableRightClick(elements[i]); enablePointerEvents(elements[i]); } } function enableRightClickLight(el) { el || (el = document); el.addEventListener('contextmenu', bringBackDefault, true); } function enableRightClick(el) { el || (el = document); el.addEventListener('contextmenu', bringBackDefault, true); el.addEventListener('dragstart', bringBackDefault, true); el.addEventListener('selectstart', bringBackDefault, true); el.addEventListener('click', bringBackDefault, true); el.addEventListener('mousedown', bringBackDefault, true); el.addEventListener('mouseup', bringBackDefault, true); } function restoreRightClick(el) { el || (el = document); el.removeEventListener('contextmenu', bringBackDefault, true); el.removeEventListener('dragstart', bringBackDefault, true); el.removeEventListener('selectstart', bringBackDefault, true); el.removeEventListener('click', bringBackDefault, true); el.removeEventListener('mousedown', bringBackDefault, true); el.removeEventListener('mouseup', bringBackDefault, true); } function bringBackDefault(event) { event.returnValue = true; (typeof event.stopPropagation === 'function') && event.stopPropagation(); (typeof event.cancelBubble === 'function') && event.cancelBubble(); } function enablePointerEvents(el) {  if (!el) return; el.style.pointerEvents='auto'; el.style.webkitTouchCallout='default'; el.style.webkitUserSelect='auto'; el.style.MozUserSelect='auto'; el.style.msUserSelect='auto'; el.style.userSelect='auto'; enablePointerEvents(el.parentElement); } enableContextMenu();

답변

javascript:void(document.oncontextmenu=null);
열린 브라우저 콘솔을 사용하고 위의 코드를 실행할 수 있습니다 . 마우스 오른쪽 버튼 차단 기능이 해제됩니다.