时间戳

首页 > 解决方案 > THREE.js WebGLRenderer 画布消耗“点击”鼠标事件

javascript - THREE.js WebGLRenderer 画布消耗“点击”鼠标事件

问题描述

当我将domElementTHREE.js 的（即画布）添加WebGLRenderer到我的文档时，当我单击作为画布父级的容器元素时，不再触发“单击”鼠标事件。

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

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

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

标签： javascriptthree.js

解决方案

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

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

希望有帮助

推荐阅读