[英]How can I call a javascript function upon hovering an a-frame element, using its ID?
I have been calling javascript functions on mouseenter, like this:我一直在 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>
It works for the cylinder, and for the first box (the one that comes first in the HTML).它适用于圆柱体和第一个框(HTML 中的第一个框)。 However, I cannot specify which box I want to hover on to call the function if, instead of using
querySelector('a-box')
I use querySelector('elementID')
.但是,如果我使用
querySelector('a-box')
而不是使用querySelector('elementID')
,我无法指定要在哪个框上调用 function 。
First of all, keep in mind, querySelector
will always return the first matched element , so in order to get all the boxes, you should use querySelectorAll
instead.首先,请记住,
querySelector
将始终返回第一个匹配的元素,因此为了获取所有框,您应该改用querySelectorAll
。 Also, for selecting id
you should refer it by #
keyword .此外,对于选择
id
,您应该通过#
引用它。
There are multiple ways to overcome this situation, for selecting each specific element in your DOM you can simply assign a unique id
to each of them and then refer to them by document.getElementById
.有多种方法可以克服这种情况,要选择 DOM 中的每个特定元素,您可以简单地为每个元素分配一个唯一的
id
,然后通过document.getElementById
引用它们。 So let's find out how it works exactly, for instance, let's say you assign a unique id
to your second box like this:因此,让我们找出它是如何工作的,例如,假设您为第二个框分配了一个唯一的
id
,如下所示:
<a-box id="testBox" class="hoverable" position="0 0.8 -4" rotation="0 45 0" radius="1.25" color="#EF2D5E"></a-box>
For referring to such an element you can either do it with getElementById
or querySelector
just like this:要引用这样的元素,您可以使用
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");
})
NOTE: You should always consider using #
for selecting items by id
and .
注意:您应该始终考虑使用
#
通过id
和.
for selecting items by class
.用于通过
class
选择项目。
But if you got a situation when the elements are too much and you want to avoid using the unique id
for each of them you can do this by querySelectorAll
and then iterate through them and add an event to each element.但是,如果您遇到元素太多的情况,并且您希望避免为每个元素使用唯一
id
,您可以通过querySelectorAll
执行此操作,然后遍历它们并为每个元素添加一个事件。 For more info, you can read this .有关更多信息,您可以阅读此内容。
I will just fix your current code, so your code should be something like 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>
If you want to refer to an item by class, use queryElementsByClassName.如果要通过 class 引用项目,请使用 queryElementsByClassName。 This can return multiple items.
这可以返回多个项目。
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
if you want to refer to item by its ID, use getElementById.如果要通过 ID 引用项目,请使用 getElementById。 If an item does not have an ID, then you have to use querySelector
如果项目没有 ID,则必须使用 querySelector
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
querySelector can query for tag, class, or ID, if you specify # for ID and. querySelector 可以查询标签、class 或 ID,如果您指定 # 为 ID 和。 for class, like.hoverable or #testbox.
对于 class,like.hoverable 或 #testbox。 However, it will only return one item.
但是,它只会返回一项。
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
If you want more than one, use querySelectorAll如果您想要多个,请使用 querySelectorAll
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.