0

我一直在 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')I use querySelector('elementID')。

4

2 回答 2

1

首先，请记住，querySelector总是会返回第一个匹配的元素，所以为了得到所有的盒子，你应该使用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");
})

注意：您应该始终考虑使用#for selection items byid和.for selection items by class。

但是，如果您遇到元素太多的情况，并且您希望避免id对每个元素使用唯一的，您可以这样做querySelectorAll，然后遍历它们并为每个元素添加一个事件。有关更多信息，您可以阅读此内容。

我将修复您当前的代码，因此您的代码应该是这样的：

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>

于 2020-05-15T07:51:22.573 回答
1

如果要按类引用项目，请使用 queryElementsByClassName。这可以返回多个项目。

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 可以查询标签、类或 ID，如果您为 ID 和 指定 # 。对于类，例如 .hoverable 或 #testbox。但是，它只会返回一项。

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

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

于 2020-05-15T07:58:04.067 回答