javascript 과 zindex 의 중첩 div 는 이벤트 관 계 를 어떻게 처리 합 니까?
한 페이지 에 세 개의 독립 된 div 가 있 으 며, 끼 워 넣 은 계층 관 계 는 존재 하지 않 습 니 다.3 개의 div 가 서로 중첩 되 어 감청 사건 의 차원 관 계 를 어떻게 통제 합 니까?예 를 들 어 div 2 커버 부분 div 1. 중첩 부분 을 클릭 하면 div 1 이 어떻게 들 을 수 있 습 니까?
테스트 코드:
div{
width:200px;
height:200px;
position: absolute;
}
#rec1{
background-color: yellow;
opacity:0.7;
background-color: transparent none;
z-index: 1;
}
#rec2{
background-color: red;
opacity:0.7;
left:100px;
z-index: 2;
}
#rec3{
background-color: blue;
opacity:0.7;
left:200px;
z-index: 3;
}
$(document).ready(function(){
var rec1 = document.getElementById("rec1");
var rec2 = document.getElementById("rec2");
var rec3 = document.getElementById("rec3");
rec1.addEventListener("click",function(event){
console.log(event);
event.stopPropagation;
event.preventDefault();
console.log("rec1");
},false);
rec2.addEventListener("click",function(event){
console.log(event);
event.stopPropagation;
event.preventDefault();
console.log("rec2");
},false);
rec3.addEventListener("click",function(event){
console.log(event);
event.stopPropagation;
event.preventDefault();
console.log("rec3");
},false);
})
나의 해결 방안:
rec1 을 감청 하면 rec1 에 rec1 Wrapper 를 추가 합 니 다. z - index 가 가장 높 고 rec1 Wrapper 는 click 이 벤트 를 감청 하고 rec1 의 클릭 이 벤트 를 촉발 합 니 다.
rec1Wrapper.addEventListener("click",function(event){
$("#rec1").trigger("click");
},false);
#rec1Wrapper {
z-index:99;
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
