Question

当我将THREE.js domElement的{{1}}（即画布）添加到我的文档中时，当我单击作为父项的容器元素时，不再触发'click'鼠标事件的画布。

是否有一种方法可以防止画布消耗鼠标单击？

编辑：删除以下单行代码（即完全不添加画布）可恢复点击：

WebGLRenderer

Answer 1

一种可能是使用pointer-events:none扩展CSS，以使画布不会截获您打算让容器元素消费的鼠标事件：

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

希望有帮助

THREE.js WebGLRenderer画布消耗了“单击”鼠标事件

1 个答案: