이벤트가 볼 수 DOM 요소를 통과 만들려면

Question

우리가이 코드를 보자 : 우리가 예를 들어, 클릭을하면 상위 계층 inner_child_2에

<div id="outer_container"> 
    <div id="inner_child_1"></div> 
    <div id="inner_child_2"></div> 
</div> 

div#outer_container 
{ 
    position: relative; 
    width: 200px; 
    height: 200px; 
    background-color: green; 
} 

div#inner_child_1 
{ 
    position: absolute; 
    z-index: 1 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: red; 
} 

div#inner_child_2 
{ 
    position: absolute; 
    z-index: 2 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: blue; 
} 

을, 이벤트에 등록 된 모든 이벤트 핸들러에 전파됩니다 inner_child_2와 그 부모 outer_container. inner_child_2 바로 아래에도 불구하고 inner_child_1하지 마세요. 이것은 사양입니다. 최신의 모든 브라우저가 그것을합니다.

어떻게 이벤트가 inner_child_2를 통과하고 Z- 인덱스 표시 또는 변경하지 inner_child_1 만들기 외에, inner_child_1에 도달하기 위해 :

내 질문은 이것이다? (또는 투명하지만 IE8에서만 작동합니다)

inner_child_2에 등록 된 일부 처리기 코드에서 이벤트를 직접 트리거하는 것에 대해 생각했습니다. 하지만 실제 사용 사례에서는 어디서 이벤트를 파견해야할지 모르겠다. inner_child_2 아래에는 예측할 수없는 방식으로 배치 된 여러 요소가 있으며 inner_child_2가없는 것처럼 이벤트를 수신하기를 원합니다. 이상적으로, 나는 다른 사람들을 지키면서 일부 이벤트를 선택적으로 전달할 수 있기를 원합니다.

내가이 어려운 질문입니다 알지만, 어떤 제안

을 주셔서 감사합니다

Answer 1

상향식 접근 방식 걸릴 것 한 가지 방법 : 당신이 click 이벤트를 처리 할 것, 부모 컨테이너에서

을, 그런 다음 자식을 반복하고 클릭 좌표를 각 자식의 상대 경계와 비교합니다. 클릭이 범위 내에 있으면 클릭이 발생 했으므로 그 자식에 대해 click 이벤트를 수동으로 트리거하십시오.