如何在悬停 a-frame 元素时使用其 ID 调用 javascript 函数？

Question

我一直在 mouseenter 上调用 javascript 函数，如下所示：

document.querySelector('a-cylinder').addEventListener('mouseenter', function(evt) {
  alert("This is a cylinder.");
})

document.querySelector('a-box').addEventListener('mouseenter', function(evt) {
  alert("This is a box.");
})

document.querySelector('testBox').addEventListener('mouseenter', function(evt) {
  alert("This is a box, targeted with an ID");
})

<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-event-set-component@3.0.3/dist/aframe-event-set-component.min.js"></script>

<a-scene>
  <a-camera camera look-controls="reverseMouseDrag: true" cursor="rayOrigin: mouse" raycaster="objects: .hoverable"></a-camera>
  <a-box class="hoverable" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
  <a-box id="testBox" class="hoverable" position="0 0.8 -4" rotation="0 45 0" radius="1.25" color="#EF2D5E"></a-box>
  <a-cylinder class="hoverable" position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

它适用于圆柱体和第一个盒子（HTML 中第一个盒子）。但是，如果不使用 querySelector('a-box') 我使用 querySelector('elementID').

，我无法指定要悬停在哪个框上以调用该函数

Answer 1

首先要记住，querySelector总是return第一个匹配的元素，所以为了得到所有的框，你应该使用 querySelectorAll 来代替。此外，选择 id 您应该通过 # 关键字 引用它。

有多种方法可以克服这种情况，对于 选择 DOM 中的每个特定元素，您可以简单地为每个元素分配一个唯一的 id，然后参考他们 document.getElementById。那么让我们看看它到底是如何工作的，例如，假设您像这样为第二个框分配了一个唯一的 id：

<a-box id="testBox" class="hoverable" position="0 0.8 -4" rotation="0 45 0" radius="1.25" color="#EF2D5E"></a-box>

要引用这样的元素，您可以使用 getElementById 或 querySelector，就像这样：

document.getElementById('#testBox').addEventListener('mouseenter', function(evt) {
  alert("This is a box, targeted with an ID");
})

// or

document.querySelector('#testBox').addEventListener('mouseenter', function(evt) {
  alert("This is a box, targeted with an ID");
})

注意： 您应该始终考虑使用 # 通过 id 选择项目，使用 . 通过 [=26= 选择项目].

但是如果遇到元素过多的情况并且您想避免对每个元素使用唯一的id，您可以通过querySelectorAll 然后遍历它们并为每个元素添加一个事件。更多信息，您可以阅读this.

我只会修复你当前的代码，所以你的代码应该是这样的：

document.querySelector('a-cylinder').addEventListener('mouseenter', function(evt) {
  alert("This is a cylinder.");
})

document.querySelector('a-box').addEventListener('mouseenter', function(evt) {
  alert("This is a box.");
})

document.querySelector('#testBox').addEventListener('mouseenter', function(evt) {
  alert("This is a box, targeted with an ID");
})

<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-event-set-component@3.0.3/dist/aframe-event-set-component.min.js"></script>

<a-scene>
  <a-camera camera look-controls="reverseMouseDrag: true" cursor="rayOrigin: mouse" raycaster="objects: .hoverable"></a-camera>
  <a-box class="hoverable" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
  <a-box id="testBox" class="hoverable" position="0 0.8 -4" rotation="0 45 0" radius="1.25" color="#EF2D5E"></a-box>
  <a-cylinder class="hoverable" position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

Answer 2

如果您想通过 class 引用项目，请使用 queryElementsByClassName。这可以 return 多个项目。

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

如果您想通过 ID 引用项目，请使用 getElementById。如果一个项目没有 ID，那么你必须使用 querySelector

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

querySelector 可以查询标签，class 或 ID，如果您为 ID 和指定#。对于 class，例如 .hoverable 或 #testbox。但是，它只会 return 一项。

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

如果您想要多个，请使用 querySelectorAll

如何在悬停 a-frame 元素时使用其 ID 调用 javascript 函数？

How can I call a javascript function upon hovering an a-frame element, using its ID?

javascript

hover

aframe

mouseenter

queryselector