听者对此感到困惑？答案

【问题标题】：Confusion with this on listener?听者对此感到困惑？
【发布时间】：2018-09-15 05:16:49
【问题描述】：

我在一个场景中有几个实体，它们是外部触发可见的。当它们可见并且用户将鼠标悬停在它们上时（基于注视，因此当用户查看实体时），应该播放每个实体唯一的音频。当用户看向别处时，音频应该停止。

我遇到的问题是，当同时打开多个对象时，我的自定义组件中的侦听器似乎不知道正在播放哪个实体，并且会停止/启动错误的音频。如何确保侦听器用于正确的实体？

js：

AFRAME.registerComponent('play-audio', {
init:function() {
let playing = false;
let audio = this.el.components.sound;

this.el.addEventListener('mouseenter', () => {
  var viz = this.el.getAttribute('material').visible;
  if (viz){
    if(!playing) {
      audio.playSound();
    } else {
      audio.stopSound();
    }
    playing = !playing;
  }

});
this.el.addEventListener('mouseleave', () => {
  audio.stopSound();
  playing = !playing;
})
}
})

示例 HTML：

<a-sound  id="popup1" data-clickable play-audio autoplay="false" loop="false" volume="5"  visible="false" src="#audio1">
</a-sound>

<a-sound  id="popup2" data-clickable play-audio autoplay="false" loop="false" volume="5"  visible="false" src="#audio2">
</a-sound>

【问题讨论】：

标签： aframe

【解决方案1】：

绑定看起来不错。

是因为两个声音同时被交叉/看着吗？我不认为可见性不会关闭光线投射器。您可以添加/删除 data-clickable 属性。

【讨论】：

奇怪——当我删除数据可点击时，它以某种方式被解释为鼠标离开。我有： audio.playSound() self.el.removeAttribute('data-clickable');但是当data-clickable属性代码被执行时，处理退出了if语句，下面的mouseleave代码被执行。
是的，这是意料之中的。该元素不再是可光线投射的，因此不再相交，因此它被视为 mouseleave。您可以在 mouseleave 函数中添加一个检查，以便它在暂停前检查可点击的数据是否仍然存在。
好的，感谢您指出这一点！我以为我会添加类似 var canuClick = self.el.getAttribute('data-clickable');但是即使该属性存在，var canuClick 也是空的。我错过了什么？