首页 > 解决方案 > AFrame - el.addeventlistener

问题描述

I want to trap a ctrl-click event within a click event.

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

I get these results "event=undefined" and "eventobject=[object CustomEvent]", respectively. Can't figure out what i I'm doing wrong.

标签: aframe

解决方案


aframeclick事件与您通常从浏览器获得的事件不同。

由于没有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
    }
  }
})

在这里查看。


推荐阅读