带有事件监听器的 Aframe 单击按钮答案

【问题标题】：Aframe click button with eventlistener带有事件监听器的 Aframe 单击按钮
【发布时间】：2019-09-02 17:57:39
【问题描述】：

我尝试在用户按下按钮时执行一个动作（需要一个事件监听器，因为https://webkit.org/blog/6784/new-video-policies-for-ios/），但我想，我有一些语法/逻辑错误。一些帮助会很好：D。

代码如下：

HTML：

   <a-image id="playbutton_1" position="-5 0 0" width="2" height="2" rotation="0 -90 0" ></a-image>

JS：

var playthisvid_1 = document.querySelector('#playbutton_1');

    playthisvid_1.addEventListener('click', () => { console.log("it clicks");  })

【问题讨论】：

【解决方案1】：

Aframe 元素不会简单地对触摸/鼠标事件做出反应。您需要一个基于 ray 的光标。

模拟鼠标的一个好方法是使用cursors 属性：

<a-scene cursor="rayOrigin: mouse">

它也应该适用于移动设备上的触摸事件。

查看here。

否则使用 a-frame 光标。

<a-cursor></a-cursor>

【讨论】：

我得到这个 Unhandled Promise Rejection: NotAllowedError: 在当前上下文中，用户代理或平台不允许请求，可能是因为用户拒绝了权限。在 iphone 上，如果我尝试与听众一起播放视频，知道为什么会出现吗？
是在 safari 还是其他浏览器上？如果没有，你能检查它是否适用于 iOS 上的其他浏览器吗？
不能在 iPhone 上的 chrome/safari 上工作（桌面一切正常）
stackoverflow.com/questions/51878346/…这里有更多信息
谢谢，现在可以了。问题是您的示例页面中的按钮不在场景中，它是一个普通的 html 元素。所以我将我的更改为普通的并且它可以工作。唯一的问题是我现在不能用我的纸板凝视它们。

【解决方案2】：

我认为问题出在框架上。 javascript代码运行完美。我只是用普通按钮替换了 aframe 元素，并且该功能正在运行。

var playthisvid_1 = document.querySelector('#playbutton_1');

    playthisvid_1.addEventListener('click', () => { console.log("it clicks");  })

&lt;a id="playbutton_1" href="#"&gt;Test&lt;/a&gt;

【讨论】：

【解决方案3】：

查看完整示例：

这是一个音频示例，但同样的技术也适用于视频（即让用户先点击按钮）。

最好的，德克

【讨论】：

感谢我尝试使用它，但它仍然无法与一起使用控制台说我的按钮的值始终为零。
var vrButton = document.querySelector('#playbutton_1'); var enter = function () { console.log("it clicks"); } vrButton.addEventListener('click', enter);
您能否将您的完整示例发布在 codepen 或 jsFiddle 中？