div를 클릭하여 기본 요소로 이동합니다.
나는 있습니다div그것을 가지고 있는background:transparent border 이에 에 밑에.div저는 더 많은 요소들을 가지고 있습니다.
할 수 div할 수 div.
클릭해서 클릭할 수 있게 하고 싶습니다.div기본 요소를 클릭할 수 있습니다.
네, 할 수 있습니다.
용사를 합니다.pointer-events: noneIE11에 대한 CSS 조건문과 함께(IE10 이하에서는 작동하지 않음), 이 문제에 대한 브라우저 간 호환 솔루션을 얻을 수 있습니다.
용사를 합니다.AlphaImageLoader당신은 심지어 투명하게 넣을 수 있습니다..PNG/.GIF의 sdiv클릭하면 아래 요소로 이동합니다.
CSS:
pointer-events: none;
background: url('your_transparent.png');
IE11 조건부:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;
여기 모든 코드가 포함된 기본 예제 페이지가 있습니다.
예, 겹친 도면층이 클릭 이벤트를 통과하도록 강제할 수 있습니다(무시).
또한 특정 자녀를 이 행동에서 제외할 수 있습니다.
이 작업은 다음을 사용하여 수행할 수 있습니다.pointer-events
pointer-events클릭, 탭, 스크롤 해제 이벤트에 대한 반응에 영향을 줍니다.
사용자가 설정한 언급된 이벤트를 무시하거나 통과해야 하는 계층
pointer-events: none;
마우스/탭 이벤트에 다시 대응해야 하는 응답하지 않는 계층의 하위 계층에는 다음이 필요합니다.
pointer-events: auto;
두 번째 부분은 하위 요소와 해당 하위 요소만 클릭할 수 있어야 하는 여러 겹의 중첩된 부분(일부 부모는 투명)을 사용하는 경우에 매우 유용합니다.
사용 예:
.parent {
pointer-events:none;
}
.child {
pointer-events:auto;
}<div class="parent">
<a href="#">I'm unresponsive</a>
<a href="#" class="child">I'm clickable again, wohoo !</a>
</div>사용자가 다음을 클릭할 수 있도록 허용div기본 요소는 브라우저에 따라 다릅니다.Firefox, Chrome, Safari 및 Opera를 포함한 모든 최신 브라우저는 이해합니다.
IE의 경우 배경에 따라 다릅니다.배경이 투명한 경우 아무 작업도 하지 않고 클릭하여 작업할 수 있습니다.면에반 같은 에는 비한것때문에슷▁on.background:white; opacity:0; filter:Alpha(opacity=0);IE에 수동 이벤트 전달이 필요합니다.
JSFidle 테스트 및 캔 참조포인터 이벤트를 사용합니다.
제가 여기서 전체를 보지 못해서 이 답변을 추가합니다.요소 FromPoint를 사용하여 이 작업을 수행할 수 있었습니다.그래서 기본적으로:
- 클릭하고 싶은 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");
});
저의 경우 중첩 디브가 완전히 배치되어 있습니다. 이것이 차이를 만들 수 있는지 모르겠습니다.이것은 적어도 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');
});
저는 현재 캔버스 말풍선으로 일을 하고 있습니다.그러나 포인터가 있는 풍선이 디브로 감싸여 있기 때문에 그 아래에 있는 일부 링크는 더 이상 클릭할 수 없습니다.이 경우에는 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 --
}
});
이 함수는 본문 클릭 이벤트의 좌표 또는 이미 클릭되었는지 여부를 증명하고 이름 속성을 반환합니다.더 깊이 들어갈 필요는 없다고 생각하지만, 그렇게 복잡하지는 않습니다.희망은 영어였습니다...
(상황에 따라) 시도해야 할 또 다른 아이디어는 다음과 같습니다.
- 당신이 원하는 내용을 디브에 넣습니다.
- Z 인덱스가 더 높은 전체 페이지 위에 클릭하지 않는 오버레이를 놓습니다.
- 원본 div를 또 다른 cople로 복사합니다.
- 더 높은 z 인덱스로 클릭할 수 있는 원본 콘텐츠와 동일한 위치에 복사 div를 오버레이하고 배치하시겠습니까?
무슨 생각 있어요?
제 생각엔event.stopPropagation();여기서도 언급되어야 합니다.단추의 클릭 기능에 추가합니다.
이벤트가 DOM 트리에 거품을 일으키는 것을 방지하여 부모 핸들러에게 이벤트에 대한 알림을 받지 못하게 합니다.
포장만 해주세요.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를 포함한 모든 사진을 클릭할 수 있습니다!
보다 쉬운 방법은 다음과 같이 데이터 URI를 사용하여 투명 배경 이미지를 인라인화하는 것입니다.
.click-through {
pointer-events: none;
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}
마크업 변경을 고려해 볼 수 있을 것 같습니다.내가 틀린 것이 아니라면, 문서 위에 보이지 않는 레이어를 배치하고 싶을 것이고 보이지 않는 마크업이 문서 이미지 앞에 있을 수도 있습니다(이것이 정확합니까?).
대신 문서 이미지 바로 뒤에 보이지 않는 것을 두되 절대 위치로 변경하는 것을 제안합니다.
부모 요소가 있어야 위치가 상대적이라는 점에 유의하십시오. 그러면 이 아이디어를 사용할 수 있습니다.그렇지 않으면 절대 계층이 왼쪽 상단 모서리에 배치됩니다.
절대 위치 요소는 정적이 아닌 위치를 갖는 첫 번째 부모 요소에 상대적으로 위치합니다.이러한 요소를 찾을 수 없는 경우 포함 블록은 html입니다.
이게 도움이 되길 바랍니다.CSS 포지셔닝에 대한 자세한 내용은 여기를 참조하십시오.
다음과 같은 AP 오버레이를 배치할 수 있습니다.
#overlay {
position: absolute;
top: -79px;
left: -60px;
height: 80px;
width: 380px;
z-index: 2;
background: url(fake.gif);
}
<div id="overlay"></div>
그냥 클리크를 원하지 않는 곳에 두세요.전체적으로 작동합니다.
이는 질문에 대한 정확한 답변은 아니지만 해결 방법을 찾는 데 도움이 될 수 있습니다.
페이지 로드에서 숨기고 있던 이미지가 있어서 AJAX 호출을 기다렸다가 다시 숨길 때 표시했습니다.
페이지를 로드할 때 이미지를 표시한 다음 이미지를 사라지게 하고 이미지를 숨기기 전에 이미지가 위치한 곳을 클릭할 수 있는 유일한 방법을 찾았습니다. 이미지를 DIV에 넣고 DIV의 크기를 10x10픽셀 이하로 작게 만들어 문제를 일으킨 다음 포함된 div를 숨기는 것입니다.이를 통해 영상이 보이는 동안 div를 오버플로우할 수 있었고 div를 숨겼을 때 div 영역만 DIV가 포함하고 표시하는 전체 이미지 크기가 아니라 아래의 객체를 클릭할 수 없는 영향을 받았습니다.
저는 CSS display=display/block, oppacity=0, hidden=true로 이미지를 숨기기 위해 모든 방법을 시도했습니다.이 모든 것들은 제 이미지를 숨겼지만, 아래에 있는 것들에 덮개가 있는 것처럼 표시된 영역은 클릭 등으로 인해 기본 개체에 작용하지 않습니다.일단 이미지가 작은 DIV 안에 있고 작은 DIV를 숨겼더니 이미지가 차지하는 전체 영역이 선명하고 숨긴 DIV 아래의 작은 영역만 영향을 받았지만 충분히 작게(10x10픽셀) 만들었기 때문에 문제가 해결되었습니다.
저는 이것이 간단한 문제에 대한 더러운 해결책이라는 것을 알았지만 컨테이너 없이 기본 형식으로 개체를 숨길 수 있는 방법을 찾을 수 없었습니다.나의 목적은 등의 형태였습니다.더 좋은 방법이 있으면 알려주세요.
항상 사용할 수는 없었습니다.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;
});
일부 캔버스 개체도 입력 필드와 함께 제공되어 키보드 이벤트도 허용해야 했습니다.▁the다했니습▁to▁update▁i▁to▁had를 업데이트해야 했습니다.pointerEvents캔버스 입력 필드의 현재 초점 여부를 기준으로 하는 속성:
onCanvasModified(canvas, () => {
const inputFieldInCanvasActive = // TODO: Check if an input field of the canvas is active.
wrapper.style.pointerEvents = inputFieldInCanvasActive ? 'auto' : 'none';
});
그런 식으로 작동하지 않습니다.해결 방법은 각 요소가 차지하는 영역에 대해 마우스 클릭의 좌표를 수동으로 확인하는 것입니다.
은 1.를 얻는 . 를 구하는 에 의해 수 . 와 같은 을 꽤 만들 수. 비록 로 할 수 . 1. 를 추가합니다. 요에소 위 점 2의 jQuery와 같은 라이브러리는 이것을 꽤 단순하게 만들 수 있습니다. 비록 그것은 평범한 js로 할 수 있습니다. 에 대한 이벤트 핸들러를 추가합니다.mousemove에서.document 및 가 어떤 위에 합니다.마우스 위치가 요소의 왼쪽, 오른쪽, 위쪽 및 아래쪽 가장자리 사이에 있는지 확인하는 것으로 마우스가 지정된 개체 위에 있는지 여부를 결정합니다.
아니요, 요소를 '통과'를 클릭할 수 없습니다.클릭의 좌표를 얻을 수 있고 클릭된 요소 아래에 어떤 요소가 있었는지 확인할 수 있지만, 이 기능이 없는 브라우저에서는 정말 지루합니다.document.elementFromPoint그런 다음 클릭이라는 기본 동작을 에뮬레이트해야 합니다. 이 동작은 아래에 어떤 요소가 있는지에 따라 반드시 사소한 것은 아닙니다.
창 영역이 완전히 투명하기 때문에 중앙 영역에 장애물이 없도록 외부의 별도 테두리 요소로 구현하는 것이 더 나을 수 있습니다. 따라서 실제로 바로 클릭할 수 있습니다.
언급URL : https://stackoverflow.com/questions/3680429/click-through-div-to-underlying-elements
'programing' 카테고리의 다른 글
| max_input_message.htaccess로 인해 500개의 오류가 발생함 (0) | 2023.06.11 |
|---|---|
| 클래스 스타일 구성 요소 sintax가 없는 형식 스크립트가 있는 vuex에서 mapGetter 및 mapMutation 사용 (0) | 2023.06.11 |
| Oracle SQL:두 숫자 사이의 모든 정수 가져오기 (0) | 2023.06.11 |
| mariadb에서 연결된 "데이터베이스"를 만드는 방법이 있습니까? (0) | 2023.06.11 |
| "예외가 호출 대상에 의해 던져졌습니다." 오류(mscorlib) (0) | 2023.06.11 |