답변:
예, 당신 은 이것을 할 수 있습니다.
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를 사용 하여이 작업을 수행 할 수있었습니다. 그래서 기본적으로:
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();
});$('#elementontop)해야한다 $('#elementontop')?
나는 이것을해야 했고이 길을 가기로 결정했다.
$('.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 속성을 반환합니다. 더 깊이 갈 필요는 없지만 그렇게 복잡하지는 않습니다. 희망은 부러워했다 ...
그런 식으로 작동하지 않습니다. 해결 방법은 각 요소가 차지하는 영역에 대해 마우스 클릭 좌표를 수동으로 확인하는 것입니다.
요소가 차지하는 영역은 1. 페이지의 왼쪽 상단에 대한 요소의 위치를 가져오고 2. 너비와 높이로 찾을 수 있습니다. jQuery와 같은 라이브러리는 일반 js로 수행 할 수 있지만 이것을 매우 간단하게 만듭니다. 객체 mousemove에 이벤트 핸들러를 추가하면 document페이지의 상단과 왼쪽에서 마우스 위치를 지속적으로 업데이트합니다. 마우스가 주어진 객체 위에 있는지 결정하는 것은 마우스 위치가 요소의 왼쪽, 오른쪽, 위쪽 및 아래쪽 가장자리 사이에 있는지 확인하는 것으로 구성됩니다.
마크 업 변경을 고려할 수 있다고 생각합니다. 내가 틀리지 않은 경우 문서 위에 보이지 않는 레이어를 배치하고 보이지 않는 마크 업이 문서 이미지 앞에있을 수 있습니다 (정확합니까?).
대신, 나는 당신이 문서 이미지 바로 뒤에 보이지 않는 것을 놓을 것을 제안하지만 위치를 절대로 변경합니다.
position : relative를 갖는 부모 요소가 필요하면이 아이디어를 사용할 수 있습니다. 그렇지 않으면 절대 레이어가 왼쪽 상단에 배치됩니다.
절대 위치 요소는 정적 이외의 위치를 가진 첫 번째 상위 요소를 기준으로 배치됩니다. 이러한 요소를 찾지 못하면 포함 블록은 html입니다.
a예를 들어 모든 HTML 추출 주위에 태그를 감싸기 만하면됩니다.
<a href="/categories/1">
<img alt="test1" class="img-responsive" src="/assets/photo.jpg" />
<div class="caption bg-orange">
<h2>
test1
</h2>
</div>
</a>내 예제에서 캡션 클래스에는 포인터 이벤트 가있는 호버 효과 가 있습니다. 당신은 단지 잃을 것입니다
내용을 감싸면 호버 효과가 유지되고 div가 포함 된 모든 그림을 클릭 할 수 있습니다 !
이 질문에 대한 정확한 답변은 아니지만 해결 방법을 찾는 데 도움이 될 수 있습니다.
나는 AJAX 호출을 기다렸다가 다시 숨길 때 페이지로드시 숨기고 이미지를 보았습니다 ...
페이지를로드 할 때 이미지를 표시하고 사라지게하고 이미지를 숨기 전에 이미지가있는 곳을 클릭 할 수있는 유일한 방법을 발견했습니다 .DIV에 이미지를 넣고 DIV의 크기를 10x10 픽셀 이하로 작게하십시오. 문제가 발생하지 않도록하고 포함 div를 숨길 수 있습니다. 이로 인해 이미지가 표시되는 동안 div가 오버플로 될 수 있었고 div가 숨겨 졌을 때 div 영역 만 DIV에 포함되어 표시되는 이미지의 전체 크기가 아닌 아래의 객체를 클릭 할 수없는 영향을 받았습니다.
CSS display = none / block, opacity = 0을 포함하여 이미지를 숨기고 hidden = true로 이미지를 숨기는 모든 방법을 시도했습니다. 그들 모두는 내 이미지를 숨겨 주었지만 아래에있는 물건 위에 덮개가있는 것처럼 행동하도록 표시 된 영역은 기본 개체에 영향을 미치지 않습니다. 이미지가 작은 DIV 내부에 있고 작은 DIV를 숨기면 이미지가 차지하는 전체 영역이 깨끗하고 숨겨지는 DIV 아래의 작은 영역 만 영향을 받았지만 충분히 작게 만들면 (10x10 픽셀) 문제 수정되었습니다 (정렬).
나는 이것이 간단한 문제이어야하는 것에 대한 더러운 해결 방법이라는 것을 알았지 만 컨테이너없이 객체를 기본 형식으로 숨길 수있는 방법을 찾을 수 없었습니다. 내 물건은 등의 형태였습니다. 누군가 더 나은 방법이 있다면 알려주십시오.