나는이 div가 그 background:transparent와 함께를 border. 이 아래 div에는 더 많은 요소가 있습니다.
현재 오버레이 외부를 클릭하면 기본 요소를 클릭 할 수 있습니다 div. 그러나 오버레이를 직접 클릭하면 기본 요소를 클릭 할 수 없습니다 div.
div기본 요소를 클릭 할 수 있도록 이것을 클릭하고 싶습니다 .
답변
예, 당신 은 이것을 할 수 있습니다.
pointer-events: noneIE11 이하의 CSS 조건문과 함께 사용하면 (IE10 이하에서는 작동하지 않음)이 문제에 대한 크로스 브라우저 호환 솔루션을 얻을 수 있습니다.
를 사용 하면 오버레이 AlphaImageLoader에 투명을 넣을 수 있으며 클릭이 아래의 요소로 전달됩니다..PNG/.GIFdiv
CSS :
pointer-events: none;
background: url('your_transparent.png');IE11 조건부 :
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;다음은 모든 코드 가 포함 된 기본 예제 페이지 입니다.
답변
또한 알아두면 좋을 것입니다 …
부모 요소 (아마도 투명한 div)에서 포인터 이벤트를 비활성화 할 수는 있지만 여전히 자식 요소에 대해서는 활성화되어 있습니다.
부모 레이어가 마우스 이벤트에 전혀 반응하지 않으면 서 자식 요소를 클릭 할 수있는 여러 개의 겹치는 div 레이어로 작업 할 때 유용합니다.
이를 위해 모든 육아 div가 얻어 pointer-events: none지고 클릭 가능한 자식은 포인터 이벤트를 다시 활성화합니다.pointer-events: auto
.parent {
pointer-events:none;
}
.child {
pointer-events:auto;
}
<div class="some-container">
<ul class="layer-0 parent">
<li class="click-me child"></li>
<li class="click-me child"></li>
</ul>
<ul class="layer-1 parent">
<li class="click-me-also child"></li>
<li class="click-me-also child"></li>
</ul>
</div>답변
사용자가 div기본 요소 를 클릭 할 수 있도록하는 것은 브라우저에 따라 다릅니다. Firefox, Chrome, Safari 및 Opera를 포함한 모든 최신 브라우저는을 이해 pointer-events:none합니다.
IE의 경우 배경에 따라 다릅니다. 배경이 투명하면 별도의 작업없이 클릭 연결이 작동합니다. 반면에와 같이 background:white; opacity:0; filter:Alpha(opacity=0);IE에는 수동 이벤트 전달이 필요합니다.
JSFiddle 테스트 및 CanIUse 포인터 이벤트를 참조하십시오 .
답변
이 답변을 완전히 보지 못했기 때문에이 답변을 추가하고 있습니다. 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에서 작동합니다.
답변
- 요소 오버레이 숨기기
- 커서 좌표 결정
- 그 좌표에 요소를 가져옵니다
- 요소 클릭 트리거
- 오버레이 요소를 다시 표시
$('#elementontop').click(e => {
$('#elementontop').hide();
$(document.elementFromPoint(e.clientX, e.clientY)).trigger("click");
$('#elementontop').show();
});답변
나는 이것을해야 했고이 길을 가기로 결정했다.
$('.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');
});답변
저는 현재 캔버스 말풍선으로 작업합니다. 그러나 포인터가있는 풍선은 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 속성을 반환합니다. 더 깊이 갈 필요는 없지만 그렇게 복잡하지는 않습니다. 희망은 부러워했다 …
