Android에서 길게 탭할 때 컨텍스트 메뉴 비활성화
내 웹 애플리케이션의 이미지를 길게 탭 (길게 누르기) 한 후 나타나는 컨텍스트 메뉴를 비활성화하고 싶습니다. 나는 그것을하는 방법이 다른 아이디어를 가진 게시물을 보았지만 그들 중 어느 것도 나를 위해 일하지 않는 것 같습니다.
HTML / CSS / Javascript를 통해 Android에서이 작업을 수행하는 방법이 있습니까?
이것은 1.6 이상에서 작동합니다 (올바르게 기억한다면). 1.5 이하에 대한 해결 방법이 없다고 생각합니다.
<!DOCTYPE html>
<html>
<head>
<script>
function absorbEvent_(event) {
var e = event || window.event;
e.preventDefault && e.preventDefault();
e.stopPropagation && e.stopPropagation();
e.cancelBubble = true;
e.returnValue = false;
return false;
}
function preventLongPressMenu(node) {
node.ontouchstart = absorbEvent_;
node.ontouchmove = absorbEvent_;
node.ontouchend = absorbEvent_;
node.ontouchcancel = absorbEvent_;
}
function init() {
preventLongPressMenu(document.getElementById('theimage'));
}
</script>
</head>
<body onload="init()">
<img id="theimage" src="http://www.google.com/logos/arthurboyd2010-hp.jpg" width="400">
</body>
</html>
상황에 맞는 메뉴에는 자체 이벤트가 있습니다. 당신은 그것을 잡아서 전파를 막기 만하면됩니다.
window.oncontextmenu = function(event) {
event.preventDefault();
event.stopPropagation();
return false;
};
나를 위해, 사용자가 이미지를 확대 / 축소하고 이동할 수 있도록 허용하면서 길게 누르는 다운로드를 비활성화하고 싶었 기 때문에 모든 이벤트를 흡수하는 것은 옵션이 아니 었습니다. 나는 다음과 같이 이미지 위에 "방패"div를 레이어링함으로써 만 CSS와 HTML로 이것을 해결할 수 있었다.
<div class="img-container">
<div class="shield"></div>
<img src="path.jpg">
</div>
img {
max-width: 100%;
}
.shield {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}
이것이 누군가를 돕기를 바랍니다!
Nurik의 전체 예제를 사용하지만 요소 (내 페이지의 입력 이미지)도 클릭에 대해 비활성화되었습니다.
다음과 같이 원래 줄을 변경합니다.
원래 줄 :
node.ontouchstart = absorbEvent_;
내 변경 :
node.ontouchstart = node.onclick;
이 적절한 방법으로 logpress에서 팝업 저장 이미지 메뉴를 비활성화하지만 클릭 이벤트는 유지합니다.
Dolphin HD 브라우저에서 Android 2.2가 설치된 7 인치 태블릿에서 테스트 중이며 제대로 작동합니다!
CSS를 사용하여 수행 할 수 있습니다 .
img {
pointer-events: none;
}
모바일 용 CSS 코드 사용
-webkit-touch-callout: none;
-webkit-user-select: none; /* Disable selection/copy in UIWebView */
<a id="moo" href=''> </a>
<script type="text/javascript">
var moo = document.getElementById('moo');
function handler(event) {
event = event || context_menu.event;
if (event.stopPropagation)
event.stopPropagation();
event.cancelBubble = true;
return false;
}
moo.innerHTML = 'right-click here';
moo.onclick = handler;
moo.onmousedown = handler;
moo.onmouseup = handler;
</script>
onContextMenu 이벤트를 캡처하고 이벤트 핸들러에서 false를 반환합니다.
클릭 이벤트를 캡처하고 어쨌든 일부 브라우저에서 event.button을 사용하여 이벤트를 발생시킨 마우스 버튼을 확인할 수도 있습니다.
비슷한 문제가있었습니다. 위의 제안은 Andoid 브라우저에서 작동하지 않았지만 문제가있는 이미지를 포함 된 이미지가 아닌 CSS 배경 이미지로 표시하면 문제가 해결된다는 것을 알았습니다.
pointer-events: none; // for Android
-webkit-touch-callout: none; // for iOS
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
I've had a similar issue. I've tried couple of solution from this thread and another thread for safari on the same problem (Preventing default context menu on longpress / longclick in mobile Safari (iPad / iPhone)) . The bad part was that I couldn't use onTouchStart,onTouchEnd etc...
Only prevent the event from onContextMenu. Snippet from React 16.5.2. Tested in chrome only.
<img {...props} onContextMenu={event => event.preventDefault()}
onTouchStart={touchStart}
onTouchEnd={touchEnd} />Hope it helps somebody. Cheers!
It will disable copy, but do not disable selection.
document.oncontextmenu = function() {return false;};
Works in webView.
Through raw javascript there are no events that get called for the context menu. Perhaps in the Java world there is something... There are actually several issues regarding javascript events (such as focus not working right) in the Android webkit.
ReferenceURL : https://stackoverflow.com/questions/3413683/disabling-the-context-menu-on-long-taps-on-android
'programing' 카테고리의 다른 글
| 사전 값을 일반 목록으로 가져 오는 방법 (0) | 2021.01.16 |
|---|---|
| python 0으로 numpy 배열을 채우는 방법 (0) | 2021.01.16 |
| Android의 작업 표시 줄에서 사용할 SearchView의 기본 아이콘을 변경하는 방법은 무엇입니까? (0) | 2021.01.16 |
| Hive 테이블을 CSV 파일로 내보내는 방법은 무엇입니까? (0) | 2021.01.16 |
| 정수를 숫자로 분할하여 ISBN 체크섬 계산 (0) | 2021.01.16 |