JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<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>

CSS

#btn { width:300px; height: 300px; }
#cnvs { width:300px; height: 300px; border:2px solid red; z-index:100; position: absolute;top:0;left:0;}

JavaScript

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;
        }
    }
}