javascript - THREE.js WebGLRenderer Canvas 消耗 'click' 鼠标事件

Question

当我将 THREE.js WebGLRenderer 的 domElement(即 Canvas )添加到我的文档时，当我点击作为 Canvas 父级的容器元素。

有没有办法防止 Canvas 消耗鼠标点击？

编辑:删除以下单行代码(即根本不添加 Canvas )可恢复点击:

this.domElement.appendChild(this.threeRenderer.domElement);

Answer 1

一种可能性是使用 pointer-events:none 扩展您的 CSS，这样 Canvas 就不会拦截您打算让容器元素使用的鼠标事件:

HTML:

<!-- Your container element -->
<div id="container"> 

    <!-- The nested, child canvas used by THREE -->
    <canvas id="canvas"></canvas> 
</div>

CSS:

/* Prevent the canvas from intercepting mouse events */
#canvas {
    pointer-events:none;
}

JS:

/* Register click event with the container element */
document.getElementById('container')
.addEventListener('click', function() {
    alert('click');
});

希望对你有帮助