비대륙 형 요소를 필터링하는 HTML 포인트 이벤트?

Question

< 캔버스 > API를 사용하여 간단한 웹 게임을 만들려고합니다. 캔버스에 직접 렌더링 된 GUI 요소를 JavaScript 라이브러리에서 살펴본 결과 Zebra과 같이 멋져 보이지만 캔버스 상단에 렌더링 된 표준 DOM 컨트롤을 사용하고 싶습니다. 그러나 마우스 입력이 <div>에 갇혀있는 문제가 있습니다. 사용하려는 단추, 텍스트 상자 등을 포함하고 있습니다.

지금까지 코드를 보려면 다음 이미지를 고려하거나 this fiddle으로 이동하십시오.

Screenshot http://www.ekardnt.com/capture.PNG

빨간색 배경 캔버스 요소이며, 파란색 배경의 4 개 가지 버튼과 사업부입니다. 캔버스와 div 모두 "position : absolute"CSS 속성을가집니다. 캔버스에 간단한 alert() 호출을 추가하고 div 요소의 onclick 이벤트를 사용하여 어떤 요소가 입력을 캡처하는지 표시합니다.

내가 원하는 것은 클릭이 버튼에 들지 않을 때마다 호출되는 onclick 캔버스입니다. 즉, 버튼 컨테이너 div의 노출 된 파란색 배경을 클릭하면 클릭 이벤트가 캔버스로 넘어가 길 원합니다. 그러나 현재 div의 onclick은 버튼을 클릭 할 때와 파란색 영역을 클릭 할 때 모두 호출됩니다 - 현명한 기본 동작이지만 나에게 불편합니다.

원하는 동작을 얻는 방법이 있습니까? div의 스타일에 pointer-events: none을 추가하려고 시도했지만 버튼이 입력에 전혀 응답하지 않습니다.

Answer 1

#buttons 컨테이너에 pointer-events: none;을 추가하고 버튼 요소에 pointer-events:auto;을 추가하십시오. 그런 다음 버튼이 기능을 유지하는 동안 컨테이너의 클릭이 "폴 스루 (fall-through)"됩니다.

http://jsfiddle.net/GD4Da/18/

#buttons { 
    /* ... */ 
    pointer-events: none; 
} 
#buttons button { 
    pointer-events: auto; 
}