当鼠标指针位于"div"元素上时，缩放不起作用

Question

我有一个threejs(即webgl(查看器，我将简单的2D图标渲染为div元素

我处理"wheel"事件来放大/缩小我的模型，类似于轨迹球控件在原始源代码中所做的，除了一种情况外，它确实工作正常。

这种情况是当我的鼠标悬停在这些 2Ddiv 元素之一上时，"滚轮"事件永远不会到达 threejs 查看器并且不会发生缩放

div 元素是否有默认的"wheel"事件处理程序，如果没有，可能是什么问题？

编辑：

我发现"指针事件：无">是此问题解决方案的一部分，但它也从此div 元素中删除了 click 属性。我们如何解决它？

Answer 1

这不是一个三.js的问题，而是一个原始的HTML/JavaScript问题。

您可以通过创建和调度新事件来强制wheel事件通过。

考虑黄色div是你的三个.jscanvas，绿色div是你的"浮动"div。

<div id="outer" style="border: 1px black solid; background: yellow; width: 200px; height: 200px; padding: 50px; position: relative;">
	&nbsp;
</div>
<div id="inner" style="border: 1px black solid; background: green; width: 100px; height: 100px; padding: 50px; position: absolute; top: 50px; left: 50px;">
	&nbsp;
</div>
<script>
	var outer = document.getElementById("outer");
	var inner = document.getElementById("inner");
	outer.addEventListener("wheel", function (e) {
		console.log("outer wheel event on ", e.currentTarget.id);
	});
	inner.addEventListener("wheel", function (e) {
		var evt = new MouseEvent("wheel", {
			view: window,
			bubbles: true,
			cancelable: true
		});
		outer.dispatchEvent(evt);
		console.log("inner wheel event on ", e.currentTarget.id);
	});
</script>

您需要填写一些空白，以确保将正确的信息发送到TrackballControls事件，例如车轮三角洲。查看TrackballControls代码，了解它用于wheel事件的事件属性。