AFrame - el.addeventlistener答案

【问题标题】：AFrame - el.addeventlistenerAFrame - el.addeventlistener
【发布时间】：2019-02-02 20:37:56
【问题描述】：

我想在点击事件中捕获一个 ctrl-click 事件。

el.addEventListener('click', function (e) {
  console.log("event="+e.detail.name); 
  console.log("eventobject="+e); 
  ..blah blah 
}

我分别得到“event=undefined”和“eventobject=[object CustomEvent]”这些结果。想不通我是什么我做错了。

【问题讨论】：

什么是 ctrlclick？为什么e.detail.name，你从哪里得到的？是的，您正在将一个对象记录到一个字符串中，因此它将显示CustomEvent。
如何修复我的代码？正确的语法是什么？
我试过这个：console.log (e.ctrlkey);也没有用。

标签： aframe

【解决方案1】：

aframe click 事件与您从浏览器获得的 typically 事件不同。

由于在 aframe 点击中没有ctrlKey（毕竟它是一个 VR 框架），您可以记住是否按下了 ctrl，并在您获得鼠标点击时使用该信息：

AFRAME.registerComponent('foo', {
  init: function() {
    // variable keeping the ctrl button state
    this.ctrlIsDown = false 

    // bind the function recognizing whether ctrl is pressed
    this.ctrlHandler = AFRAME.utils.bind(this.ctrlHandler, this)
    document.body.addEventListener('keydown', this.ctrlHandler)
    document.body.addEventListener('keyup', this.ctrlHandler)

    // If ctrl is down when a click occured - log it
    this.el.addEventListener('click', (e) => {
      if (this.ctrlIsDown) {
        console.log("ctr key was pressed during the click");
      }
    })
  },
  // save the state of the ctrl button
  ctrlHandler: function(e) {
    // change the variable only if the state differs
    if (!this.ctrlIsDown && e.ctrlKey) {
      this.ctrlIsDown = true
    } else if (this.ctrlIsDown && !e.ctrlKey) {
      this.ctrlIsDown = false
    }
  }
})

查看here。

【讨论】：