자바 스크립트 이벤트 처리 및 Z- 인덱스

Question

현재 저는 Z- 인덱스에 의해 서로 위에 세 개의 캔버스가 쌓여 있습니다.

<canvas width="800" height="600" id="test3_canvas" style="position: absolute; left: 0; top: 0; z-index:2"></canvas> 

    <canvas width = "800" height="600" id="test2_canvas" style="position: absolute; left: 0; top: 0;z-index:1"></canvas> 

    <canvas width="800" height="600" id="test1_canvas" style="position: absolute; left:0; top: 0;z-index:0"></canvas> 

하지만 상위 레이어 캔버스 (Z- 인덱스 : 2) 내가 설정 한 mousedown/mouseup에 /에서 mousemove 이벤트를 잡는 것 같다. 다른 레이어에서도 이벤트를 잡을 수있는 방법이 있습니까?

Answer 1

아니요, 그렇게 할 방법이 없습니다. 일반적으로 마우스 이벤트 모델은 최상위 레이어가 마우스 상호 작용을 "포착"하고 문서 렌더링에서 해당 요소 아래의 요소는 이벤트를 전혀 얻지 못한다는 것입니다. 일반적인 HTML 마크 업을 사용하면 요소의 "스택"이 어휘 적으로 태그에 중첩되도록 페이지 디자인을 정렬 할 수 있습니다.이 경우 브라우저는 요소 조상을 통해 이벤트를 버블 링합니다. 그러나 캔버스 요소를 사용하면 실제로 그렇게 할 수 없습니다. @ 자렛의 대답이 설정이 이상한 것 같다 비록

Answer 2

에서

편집 — 보면, 난 당신이 캔버스 외부 사업부에 처리기를 넣어 다음 각 캔버스에 필요한 무엇이든 해당 이벤트 호출을 가질 수있다 생각합니다. 최상위 레이어는 그렇지 않은 경우 마우스 이벤트를 잡아낼 것입니다.

Answer 3

역방향 레이어를 잡을 필요가 없습니다. 크기가 같기 때문에 하나의 이벤트 만 가져 와서 다른 레이어에 매핑하면됩니다.

편집 : 왜 하나의 캔버스에만 그림을 그려야합니까?