마우스가 겹치는 요소와 상호 작용하도록 제한하는 캔버스 (캔버스보다 높은 z- 인덱스)

Question

다른 div의 정확한 위치에 캔버스가 있습니다. 나는 의도적으로 다른 하나 위에 이들을 배치했다.

div와 상호 작용해야 입력 (마우스 제스처를 통한 입력)이 가능하지만 같은 장소에있는 캔버스는 입력을 허용하지 않습니다.

출력이 캔버스의 응답과 div의 정적 요소를 함께 사용하기 때문에 다른 곳에 캔버스를 배치 할 수 없습니다.

이이 내 JS의 일부가 여전히면서 내가 patterncontainer의 사업부와 상호 작용할 수있는 방법

var canvas = document.getElementById("canvas"); 
// canvas.style.display = inline; 
var context = canvas.getContext("2d"); 
context.beginPath(); 
context.moveTo(x1, y1); 
context.lineTo(x2, y2); 
context.stroke(); 
ctx.fillStyle="#FF0000"; 

파일입니다

.patterncontainer { 
    margin-left: 32.5px; 
    position: absolute; 
    width: 225px; 
    height: 225px; 
    background: #66C285; 
    padding: 7.5px; 
    border-radius: 10px; 
    z-index: 1; 
} 

.canvas { 
    margin-left: 32.5px; 
    position: absolute; 
    left: 0px; 
    width: 225px; 
    height: 225px; 
    padding: 7.5px; 
    border-radius: 2px; 
    /*margin: 22.5px;*/ 
    /*background-color: #FFF;*/ 
    /*background-color: rgba(114, 160, 204, 1);*/ 
    -webkit-transform-origin: 0% 0%; 
    -moz-transform-origin: 0% 0%; 
    -o-transform-origin: 0% 0%; 
    -ms-transform-origin: 0% 0%; 
    transform-origin: 0% 0%; 
    /*-webkit-box-shadow: 0px 0px 15px 5px rgba(114, 160, 204, 1); 
    -moz-box-shadow: 0px 0px 15px 5px rgba(114, 160, 204, 1); 
    box-shadow: 0px 0px 15px 5px rgba(114, 160, 204, 1);*/ 
    /*display: none;*/ 
    z-index: -1; 
} 

내 index.html

<div class="maincontainer"> 
    <h2 id="heading" class="heading">Please set your password</h2> 
<div id="patterncontainer" class="patterncontainer"> 
</div> 
<canvas id="canvas" class="canvas"></canvas> 
</div> 

있는 style.css입니다 같은 장소에 캔버스?

추가 정보가 필요하면 의견을 보내주십시오.

Answer 1

이벤트가 수신 대기하지 않도록 이벤트가 div에 전달되도록합니다.

CSS :

canvas{pointer-events:none;}