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

Question

我有一个 threejs(即 webgl)查看器，我在上面将简单的 2D 图标呈现为 div 元素

我在我的模型上处理“滚轮”事件以zoomin/zoomout 类似于 trackballcontrols 在原始源代码中所做的，并且除了一种情况外，它确实工作正常。

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

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

编辑:

我发现 "pointer-events: none" 是这个问题的解决方案之一，但它也从这个 div 元素中删除了 click 属性。我们如何解决它？

Answer 1

这不是真正的 three.js 问题，更多的是原始 HTML/JavaScript 问题。

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

考虑黄色 div 是您的 three.js canvas，绿色 div 是您的“ float ”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 事件使用了哪些事件属性。