AFrame - el.addeventlistener

Question

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.

What's a ctrlclick? Why e.detail.name, where'd you get that? And yeah, you are logging an object into a string so it will show CustomEvent. — ngokevin
– ngokevin, Commented Feb 2, 2019 at 0:58

Piotr Adam Milewski · Accepted Answer · 2019-02-02 12:37:56Z

aframe click event varies from the one you'll get typically from a browser.

Since there is no ctrlKey in aframe clicks (its a VR framework after all), you can remember whether ctrl is pressed, and use that information when you get a mouseclick:

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
    }
  }
})

Check it out here.

Collectives™ on Stack Overflow

AFrame - el.addeventlistener

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related