클릭이 그 뒤에있는 요소로 넘어갈 수있는 HTML "오버레이"
임의의 그래픽을 그리기 위해 웹 페이지 위에 요소를 오버레이하려고하는데 모든 요소 위에 요소 안에 요소를 쌓을 수있는 지점에 도달했지만 사용자가 클릭하지 못하게합니다. 모든 링크 / 버튼 등 내용이 모든 것 위에 떠 다니는 방법이 있습니까 (반투명하므로 뒤에있는 것을 볼 수 있습니다) 사용자가 그 아래의 레이어와 상호 작용하도록합니까?DOM 이벤트 모델에 대한 많은 정보를 찾았지만 버튼과 다른 "기본"컨트롤이 처음부터 클릭을 얻지 못하는 문제를 해결하지 못했습니다.
내가 한 어리석은 해킹은 요소의 높이를 0으로 설정했지만 overflow : visible; 이것을 포인터 이벤트와 결합 : 없음; 모든 기지를 덮고있는 것 같습니다.
.overlay {
height:0px;
overflow:visible;
pointer-events:none;
background:none !important;
}
pointer-events: none;
오버레이에 추가하십시오 .
원래 답변 : 오버레이로 클릭 이벤트를 캡처하고 오버레이를 숨기고 클릭 이벤트를 다시 실행 한 다음 오버레이를 다시 표시 할 수 있다고 제안합니다. 그래도 깜박임 효과가 있는지 확실하지 않습니다.[업데이트] 정확히이 문제와 정확히 나의 해결책은이 포스트에 나타납니다 : "
". OP에 대해서는 다소 늦었을지 모르지만 앞으로이 문제가있는 사람을 위해 포함시킬 것이지만.
기록을 위해 다른 방법은 클릭 가능한 레이어를 오버레이로 만드는 것일 수 있습니다. 반투명하게 만든 다음 "오버레이"이미지를 그
뒤에 배치
합니다 (반 직관적으로 "오버레이"이미지는 불투명 할 수 있음). 수행하려는 작업에 따라 클릭 가능성 문제를 피하면서 (오버레이로 인해 이미지와 클릭 가능한 레이어가 서로 반투명하게 겹쳐진 이미지와 동일한 시각적 효과를 얻을 수 있음) "는 실제로 백그라운드에 있습니다).
다른 사람이 같은 문제를 겪고있는 경우, 내가 만족할 수있는 유일한 해결책은 캔버스가 모든 것을 덮고 모든 클릭 가능한 요소의 Z 색인을 높이는 것입니다. 당신은 그들을 그릴 수 없지만 적어도 클릭 할 수 있습니다 ...
우리 팀은이 문제에 부딪 쳤고 매우 잘 해결했습니다.
- 클릭 할 수 있고 오버레이 아래에있는 각 요소에 "통과"클래스 또는 무언가를 추가하십시오.
- 각 ".passthrough"요소에 대해 div를 추가하고 부모 위에 정확하게 배치하십시오. 이 새로운 div에 "element-overlay"클래스를 추가하십시오.
- ".element-overlay"CSS는 페이지의 오버레이 위에 높은 z- 색인을 가져야하며 요소는 투명해야합니다.
".element-overlay"의 이벤트가 ".passthrough"까지 버블 링되므로 문제를 해결해야합니다. 여전히 문제가 있다면 (지금까지는 보지 못했습니다) 바인딩을 가지고 놀 수 있습니다.이것은 @jvenema의 솔루션을 개선 한 것입니다. 이것에 대한 좋은 점은
- 모든 이벤트를 모든 요소에 전달하지는 않습니다. 원하는 것만 (@jvenema의 인수로 해결됨)
- 모든 이벤트가 올바르게 작동합니다. (예를 들면 호버).
문제가 있으면 정교하게 알려주세요.
뒷면의 버튼 / 앵커가 보이도록 불투명도를 설정 한 오버레이를 사용할 수 있지만 요소 위에 오버레이가 있으면 클릭 할 수 없습니다.
일반적으로 이것은 좋은 생각이 아닙니다. 시나리오를 살펴보면 악의적 인 의도가 있다면 "오버레이"아래에 모든 것을 숨길 수 있습니다. 그런 다음 사용자가 링크를 클릭하면 bankofamerica.com으로 이동해야한다고 생각하고 대신 숨겨진 링크를 실행하여 myevilsite.com으로 이동합니다.즉, 이벤트 버블 링이 작동하며 응용 프로그램 내에 있으면 큰 문제가 아닙니다. 다음 코드는 예입니다. 경고가 빨간색 영역에 설정되어 있어도 파란색 영역을 클릭하면 경고가 나타납니다. 이벤트가 PARENT 요소를 통해 전파되므로 주황색 영역이 작동하지 않으므로 클릭을 관찰하는 모든 요소
안에
오버레이가 있어야합니다 . 시나리오에서 운이 좋지 않을 수 있습니다.
<html>
<head>
</head>
<body>
<div id="outer" style="position:absolute;height:50px;width:60px;z-index:1;background-color:red;top:5px;left:5px;" onclick="alert('outer')">
<div id="nested" style="position:absolute;height:50px;width:60px;z-index:2;background-color:blue;top:15px;left:15px;">
</div>
</div>
<div id="separate" style="position:absolute;height:50px;width:60px;z-index:3;background-color:orange;top:25px;left:25px;">
</div>
</body>
</html>
IE는 어떻습니까? :onmousedown : 이벤트를 오버레이 할 수있는 모든 요소를 숨 깁니다. 표시 : 없음 가시성 : 숨김이 실제로 작동하지 않기 때문에 고정 된 수의 픽셀을 위해 오버레이 div를 화면 밖으로 밀어냅니다. 지연 후 동일한 수의 픽셀로 오버레이 div를 다시 밀어 넣습니다.onmouseup : 한편 이것은 당신이 해고하려는 사건입니다.
//script
var allclickthrough=[];
function hidedivover(){
if(allclickthrough.length==0){
allclickthrough=getElementsByClassName(document.body,"clickthrough");// if so .parentNode
}
for(var i=0;i<allclickthrough.length;i++){
allclickthrough[i].style.left=parseInt(allclickthrough[i].style.left)+2000+"px";
}
setTimeout(function(){showdivover()},1000);
}
function showdivover(){
for(var i=0;i<allclickthrough.length;i++){
allclickthrough[i].style.left=parseInt(allclickthrough[i].style.left)-2000+"px";
}
}
//html
<span onmouseup="Dreck_he_got_me()">Click me if you can.</span>
<div onmousedown="hidedivover()" style="position:absolute" class="clickthrough">You'll don't get through!</div>
I was having this issue when viewing my website on a phone. While I was trying to close the overlay, I was pretty much clicking on anything under the overlay. A solution that I found working for myself is to just add a
tag around the entire overlay
'IT박스' 카테고리의 다른 글
Android 프로젝트에서 ThreeTenABP를 사용하는 방법 (0) | 2020.06.01 |
---|---|
함수 서명에서 std :: enable_if를 피해야하는 이유 (0) | 2020.06.01 |
기본 생성자가 내장 유형을 초기화합니까? (0) | 2020.06.01 |
MongoDB의 명명 규칙은 무엇입니까? (0) | 2020.06.01 |
Windows에서 msysgit을 사용하여 Git 서버 설정 (0) | 2020.06.01 |