canvas를 absolute 하게 레이어로 띄워서 뭔가 입체적인 화면을 구성하는데,
그 아랫부분에서 클릭이벤트를 받고 싶은 경우 CSS에 pointer-events: none 을 넣어주면 됨.
(chrome, firefox 브라우저에서 확인)
참조 : https://developer.mozilla.org/en-US/docs/CSS/pointer-events
아래는 button 2개와 canvas 하나로 CSS를 조절하며 마우스 클릭이벤트 통과를 확인해 볼 수 있는 예제.
<!doctype html>
<html>
<head>
<style>
#btn { width:300px; height: 300px; }
#cnvs { width:300px; height: 300px; border:2px solid red; z-index:100; position: absolute; }
</style>
<script>
window.onload=function(){
// 그냥 버튼
var btn = document.getElementById('btn');
btn.onclick = function(){
alert('Button Click!');
}
// 위치 맞추기
var cnvs = document.getElementById('cnvs');
cnvs.style.left = btn.offsetLeft;
cnvs.style.top = btn.offsetTop;
// 클릭 이벤트
cnvs.onclick = function(){
alert('Canvas Click!');
}
// 포인터 이벤트 조절버튼
var pointer_events_none = false;
var btn_toggle = document.getElementById('btn_toggle');
btn_toggle.onclick = function(){
// 캔버스의 마우스 이벤트 통과시킴
if (pointer_events_none == false) {
cnvs.style.pointerEvents = 'none';
this.value = 'Set Pointer Events None = On';
pointer_events_none = true;
}
// 캔버스가 마우스 이벤트를 받음
else {
cnvs.style.pointerEvents = '';
this.value = 'Set Pointer Events None = Off';
pointer_events_none = false;
}
}
}
</script>
</head>
<body>
<input type="button" id="btn" value="CLICK" />
<br /><br />
<input type="button" id="btn_toggle" value="Set Pointer Events None = Off" />
<canvas id="cnvs"></canvas>
</body>
</html>
'HTML/CSS' 카테고리의 다른 글
| [HTML5] 모바일 웹브라우저에서 카메라 사진/동영상 찍기 (0) | 2015.02.14 |
|---|---|
| [HTML5] canvas로 double buffering 하기 (2) | 2012.05.15 |
| [HTML5] Notifications (브라우저에 트위터앱처럼 push 기능구현) (0) | 2010.12.31 |
| [HTML5] Web Messaging (cross-domain messaging, channel messaging) (0) | 2010.12.31 |
| [HTML5] 저장가능한 그림판 (canvas, localStorage) (6) | 2010.12.30 |
