div를 통해 기본 요소로 클릭

질문자 :Ryan

border 와 함께 background:transparent 가 있는 div 가 있습니다. 이 div 아래에는 더 많은 요소가 있습니다.

div 외부를 클릭하면 기본 요소를 클릭할 수 있습니다. div 직접 클릭하면 기본 요소를 클릭할 수 없습니다.

기본 요소를 클릭할 수 있도록 div 를 클릭할 수 있기를 원합니다.

예, 할 수 있습니다.

pointer-events: none 을 IE11용 CSS 조건문(IE10 이하에서는 작동하지 않음)과 함께 사용하면 이 문제에 대한 브라우저 간 호환 솔루션을 얻을 수 있습니다.

AlphaImageLoader 사용하면 오버레이 div 에 투명한 .PNG/.GIF 넣고 클릭이 아래 요소로 흐르게 할 수도 있습니다.

CSS:

 pointer-events: none; background: url('your_transparent.png');

IE11 조건부:

 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale'); background: none !important;

다음은 모든 코드가 포함된 기본 예제 페이지입니다.

LawrenceKSRealEstate

예, 겹치는 레이어가 클릭 이벤트를 통과하도록 강제 할 수 있습니다(무시).
게다가 당신은 이 행동에서 특정 아이들을 제외 시킬 수 있습니다...

pointer-events 사용하여 이 작업을 수행할 수 있습니다.

pointer-events 는 클릭, 탭, 스크롤 및 호버 이벤트에 대한 반응에 영향을 줍니다.

---

당신이 설정한 언급된 이벤트를 무시/통과해야 하는 레이어에서

 pointer-events: none;

마우스/탭 이벤트에 다시 반응해야 하는 응답하지 않는 레이어의 자식은 다음이 필요합니다.

 pointer-events: auto;

---

이 두 번째 부분은 자식 요소와 해당 자식 요소만 클릭할 수 있어야 하는 여러 겹치는 div 레이어(일부 부모는 투명함)로 작업하는 경우 매우 유용합니다.

사용 예:

 <style> .parent { pointer-events:none; } .child { pointer-events:auto; } </style> <div class="parent"> <a href="#">I'm unresponsive</a> <a href="#" class="child">I'm clickable again, wohoo !</a> </div>

Allisone

div 를 통해 기본 요소를 클릭하도록 허용하는 것은 브라우저에 따라 다릅니다. Firefox, Chrome, Safari 및 Opera를 포함한 모든 최신 브라우저는pointer-events:none 이해합니다.

IE의 경우 배경에 따라 다릅니다. 배경이 투명하면 아무 것도 할 필요 없이 클릭연결이 작동합니다. 반면에 background:white; opacity:0; filter:Alpha(opacity=0); , IE는 수동 이벤트 전달이 필요합니다.

JSFiddle 테스트 및 CanIUse 포인터 이벤트를 참조하십시오.

Vladimir Prodan

여기에 전체를 보지 못했기 때문에이 답변을 추가하고 있습니다. elementFromPoint를 사용하여 이 작업을 수행할 수 있었습니다. 그래서 기본적으로:

• 클릭하려는 div에 클릭을 첨부하십시오.
• 그것을 숨기다
• 포인터가 어떤 요소에 있는지 확인
• 거기에 있는 요소를 클릭합니다.

 var range-selector= $("") .css("position", "absolute").addClass("range-selector") .appendTo("") .click(function(e) { _range-selector.hide(); $(document.elementFromPoint(e.clientX,e.clientY)).trigger("click"); });

제 경우에는 오버레이 div가 절대 위치에 있습니다. 이것이 차이를 만드는지 확실하지 않습니다. 이것은 적어도 IE8/9, Safari Chrome 및 Firefox에서 작동합니다.

Tim

1. 요소 오버레이 숨기기
2. 커서 좌표 결정
3. 해당 좌표에서 요소 가져오기
4. 요소 클릭 트리거
5. 오버레이 요소를 다시 표시

 $('#elementontop').click(e => { $('#elementontop').hide(); $(document.elementFromPoint(e.clientX, e.clientY)).trigger("click"); $('#elementontop').show(); });

wcloister

나는 이것을해야했고이 경로를 선택하기로 결정했습니다.

 $('.overlay').click(function(e){ var left = $(window).scrollLeft(); var top = $(window).scrollTop(); //hide the overlay for now so the document can find the underlying elements $(this).css('display','none'); //use the current scroll position to deduct from the click position $(document.elementFromPoint(e.pageX-left, e.pageY-top)).click(); //show the overlay again $(this).css('display','block'); });

Matthew Grima

현재 캔버스 말풍선으로 작업하고 있습니다. 그러나 포인터가 있는 풍선은 div로 둘러싸여 있기 때문에 그 아래의 일부 링크는 더 이상 클릭할 수 없습니다. 이 경우 extjs를 사용할 수 없습니다. 내 말풍선 튜토리얼에 대한 기본 예를 보려면 HTML5가 필요합니다.

그래서 배열의 풍선 내부에서 모든 링크 좌표를 수집하기로 결정했습니다.

 var clickarray=[]; function getcoo(thatdiv){ thatdiv.find(".link").each(function(){ var offset=$(this).offset(); clickarray.unshift([(offset.left), (offset.top), (offset.left+$(this).width()), (offset.top+$(this).height()), ($(this).attr('name')), 1]); }); }

각 (새) 풍선에서 이 함수를 호출합니다. link.class의 왼쪽/위쪽 및 오른쪽/아래쪽 모서리 좌표를 가져옵니다. 추가로 누군가가 해당 좌표를 클릭하는 경우 수행할 작업에 대한 이름 속성이 있고 1을 설정하는 것을 좋아했는데 이는 클릭되지 않았음을 의미합니다. . 그리고 이 배열을 클릭 배열로 이동 해제합니다. 푸시를 사용할 수도 있습니다.

해당 배열로 작업하려면:

 $("body").click(function(event){ event.preventDefault();//if it is a a-tag var x=event.pageX; var y=event.pageY; var job=""; for(var i in clickarray){ if(x>=clickarray[i][0] && x<=clickarray[i][2] && y>=clickarray[i][1] && y<=clickarray[i][3] && clickarray[i][5]==1){ job=clickarray[i][4]; clickarray[i][5]=0;//set to allready clicked break; } } if(job.length>0){ // --do some thing with the job -- } });

이 함수는 본문 클릭 이벤트의 좌표 또는 이미 클릭되었는지 여부를 증명하고 name 속성을 반환합니다. 더 깊이 들어갈 필요는 없다고 생각하지만 그렇게 복잡하지 않다는 것을 알 수 있습니다. 희망은 엔리쉬...

B.F.

(상황에 따라) 시도할 또 다른 아이디어는 다음과 같습니다.

1. 원하는 내용을 div에 넣습니다.
2. Z-색인이 더 높은 전체 페이지 위에 클릭하지 않는 오버레이를 배치하고,
3. 원본 div의 다른 잘린 복사본 만들기
4. 오버레이 및 abs는 더 높은 z-색인으로 클릭할 수 있도록 하려는 원본 콘텐츠와 동일한 위치에 복사 div를 배치합니까?

이견있는 사람?

Adam

아니요, 요소를 '통과'할 수 없습니다. 클릭 좌표를 얻고 클릭된 요소 아래에 어떤 요소가 있었는지 알아낼 수 있지만 이것은 document.elementFromPoint 가 없는 브라우저에서 정말 지루합니다. 그런 다음 여전히 클릭의 기본 동작을 에뮬레이트해야 합니다. 이 작업은 그 아래에 있는 요소에 따라 반드시 사소한 것은 아닙니다.

완전히 투명한 창 영역이 있으므로 외부 주위에 별도의 테두리 요소로 구현하는 것이 더 나을 것입니다. 중앙 영역을 방해하지 않고 그냥 클릭하면 바로 통과할 수 있습니다.

bobince

예를 들어 모든 HTML 추출 주위 a 태그를 래핑하십시오.

 <a href="/categories/1"> <img alt="test1" class="img-responsive" src="/assets/photo.jpg" /> <div class="caption bg-orange"> <h2> test1 </h2> </div> </a>

내 예에서 내 캡션 클래스에는 pointer-events:none이 있는 호버 효과가 있습니다. 당신은 그냥 잃을 것입니다

콘텐츠를 래핑하면 호버 효과가 유지되고 div가 포함된 모든 그림을 클릭할 수 있습니다 .

Alexis

마크업 변경을 고려할 수 있다고 생각합니다. 내가 틀리지 않은 경우 문서 위에 보이지 않는 레이어를 배치하고 보이지 않는 마크업이 문서 이미지 앞에 있을 수 있습니다(이것이 맞습니까?).

대신 문서 이미지 바로 뒤에 보이지 않는 위치에 놓고 위치를 절대 위치로 변경하는 것을 제안합니다.

position: relative를 가지려면 부모 요소가 필요하며 이 아이디어를 사용할 수 있습니다. 그렇지 않으면 절대 레이어가 왼쪽 상단 모서리에 배치됩니다.

절대 위치 요소는 정적 위치가 아닌 첫 번째 상위 요소를 기준으로 배치됩니다. 그러한 요소가 없으면 포함하는 블록은 html입니다.

도움이 되었기를 바랍니다. CSS 위치 지정에 대한 자세한 내용은 여기 를 참조하세요.

julianm

나는 event.stopPropagation(); 여기서도 언급해야 한다. 이것을 버튼의 클릭 기능에 추가하십시오.

이벤트가 DOM 트리를 버블링하는 것을 방지하여 부모 핸들러가 이벤트에 대해 알림을 받는 것을 방지합니다.

kenny

더 쉬운 방법은 다음과 같이 데이터 URI를 사용하여 투명한 배경 이미지를 인라인하는 것입니다.

 .click-through { pointer-events: none; background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); }

MathuSum Mut

그런 식으로 작동하지 않습니다. 해결 방법은 각 요소가 차지하는 영역에 대해 마우스 클릭 좌표를 수동으로 확인하는 것입니다.

요소가 차지하는 영역은 1. 페이지의 왼쪽 상단을 기준으로 요소의 위치를 파악하고, 2. 너비와 높이를 통해 찾을 수 있습니다. jQuery와 같은 라이브러리를 사용하면 일반 js에서 수행할 수 있지만 이 작업을 매우 간단하게 수행할 수 있습니다. document mousemove 에 대한 이벤트 핸들러를 추가하면 페이지의 상단과 왼쪽에서 마우스 위치가 지속적으로 업데이트됩니다. 마우스가 주어진 개체 위에 있는지 결정하는 것은 마우스 위치가 요소의 왼쪽, 오른쪽, 위쪽 및 아래쪽 가장자리 사이에 있는지 확인하는 것으로 구성됩니다.

lincolnk

다음과 같은 AP 오버레이를 배치할 수 있습니다.

 #overlay { position: absolute; top: -79px; left: -60px; height: 80px; width: 380px; z-index: 2; background: url(fake.gif); }

 <div id="overlay"></div>

클릭을 원하지 않는 곳에 그냥 놓으십시오. 모두에서 작동합니다.

eric

이것은 질문에 대한 정확한 답변은 아니지만 해결 방법을 찾는 데 도움이 될 수 있습니다.

페이지로드시 숨기고 AJAX 호출을 기다릴 때 표시 한 다음 다시 숨기는 이미지가있었습니다 ...

페이지를 로드할 때 내 이미지를 표시한 다음 사라지게 하고 이미지를 숨기기 전에 이미지를 클릭할 수 있게 하는 유일한 방법은 이미지를 DIV에 넣고 DIV의 크기를 10x10픽셀 이하로 만드는 것뿐입니다. 문제를 일으키지 않고 포함하는 div를 숨기기에 충분합니다. 이렇게 하면 이미지가 보이는 동안 div가 오버플로될 수 있으며 div가 숨겨져 있을 때 DIV가 포함하고 표시하고 있던 이미지의 전체 크기가 아니라 아래에 있는 개체를 클릭할 수 없는 경우 div 영역만 영향을 받았습니다.

CSS display=none/block, opacity=0, hidden=true로 이미지 숨기기를 포함하여 이미지를 숨기는 모든 방법을 시도했습니다. 그들 모두는 내 이미지가 숨겨지는 결과를 가져왔지만 그것이 아래에 있는 물건 위에 덮개가 있는 것처럼 작동하도록 표시된 영역은 클릭 등이 기본 개체에 작용하지 않습니다. 이미지가 작은 DIV 내부에 있고 작은 DIV를 숨기면 이미지가 차지하는 전체 영역이 깨끗해지고 숨긴 DIV 아래의 작은 영역만 영향을 받았지만 충분히 작게(10x10픽셀) 만들면서 문제가 발생했습니다. (일종의) 고정되었습니다.

나는 이것이 간단한 문제에 대한 더러운 해결 방법이라는 것을 알았지만 컨테이너 없이 기본 형식으로 개체를 숨길 방법을 찾을 수 없었습니다. 내 개체는 등의 형태였습니다. 누구든지 더 나은 방법이 있으면 알려주십시오.

David Crawford

오버레이와 기본 요소가 모두 클릭 가능/선택 가능하기를 원했기 때문에 시나리오에서 항상 pointer-events: none 을 사용할 수는 없었습니다.

DOM 구조는 다음과 같습니다.

 <div id="outerElement"> <div id="canvas-wrapper"> <canvas id="overlay"></canvas> </div> <!-- Omitted: element(s) behind canvas that should still be selectable --> </div>

( outerElement , canvas-wrapper 및 canvas 요소의 크기는 동일합니다.)

캔버스 뒤에 있는 요소가 정상적으로 작동하도록(예: 선택 가능, 편집 가능) 다음 코드를 사용했습니다.

 canvasWrapper.style.pointerEvents = 'none'; outerElement.addEventListener('mousedown', event => { const clickedOnElementInCanvas = yourCheck // TODO: check if the event *would* click a canvas element. if (!clickedOnElementInCanvas) { // if necessary, add logic to deselect your canvas elements ... wrapper.style.pointerEvents = 'none'; return true; } // Check if we emitted the event ourselves (avoid endless loop) if (event.isTrusted) { // Manually forward element to the canvas const mouseEvent = new MouseEvent(event.type, event); canvas.dispatchEvent(mouseEvent); mouseEvent.stopPropagation(); } return true; });

일부 캔버스 개체는 입력 필드와 함께 제공되므로 키보드 이벤트도 허용해야 했습니다. 이렇게 하려면 캔버스 입력 필드에 현재 포커스가 있는지 여부에 pointerEvents 속성을 업데이트해야 했습니다.

 onCanvasModified(canvas, () => { const inputFieldInCanvasActive = // TODO: Check if an input field of the canvas is active. wrapper.style.pointerEvents = inputFieldInCanvasActive ? 'auto' : 'none'; });

Daniel Veihelmann

출처 : http:www.stackoverflow.com/questions/3680429/click-through-div-to-underlying-elements