CODEWITHSUNDEEP
aframe
Mario Magno
Mario Magno

Reputation: 1

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.

Upvotes: 0

Views: 613

Answers (1)

Piotr Adam Milewski
Piotr Adam Milewski

Reputation: 14655

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.

Upvotes: 1

Related Questions