Using A-frame isMobile in one function seems to block all other functions if it evaluates to false

Question

I am trying to create an A-frame scene that allows for "onclick" events if the device used to view is mobile, but that relies on keypresses for laptop/desktop.

When I use "if(this.el.isMobile)" in one component function, if the answer is false, it seems to stop any other component function from executing as well? I have tested this - and if I instead use "if(false)" in the below code in the "clickhandler" function it still allows keypresses in the "keyDownPress" function, but if I use "if(this.el.isMobile)" the "keyDownPress" function doesn't execute either.

Is this a bug or have I messed up? The documentation doesn't give too much information (from what I could find) as to what isMobile is doing behind the scenes.

<!DOCTYPE html>
    <html>
      <head></head>
      <body>
        <!DOCTYPE html>
        <html>
          <head></head>
          <body>
            <!--Load a-frame-->
            <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
            <!--Input logging events-->
            <script>
              //Register keypress
              AFRAME.registerComponent('keypress', {
                init: function() {
                  window.addEventListener('keydown', this.keyDownPress);
                },
                keyDownPress: function(evt) {
                  //If keypress is left - change box colour to blue
                  if (evt.keyCode === 37) {
                    this.color = "blue";
                  }
                }
              });
              //Register Generic Click Events for phone
              AFRAME.registerComponent('clickhandler', {
                init: function() {
                  this.el.addEventListener('mousedown', function(evt) {
                    if (this.el.isMobile) {
    //Code here to do stuff on click if mobile
    }
                      });
                    }
                  });
            </script>
            <!--A-Frame VR Scene-->
            <a-scene clickhandler>
              <a-entity camera keypress></a-entity>
              <a-sky></a-sky>
            </a-scene>
          </body>
        </html>
      </body>
    </html>

score 0 · Answer 1 · answered Sep 15 '22 at 04:02

I don't know the answer to my original question - but if anyone else has the same issue, I solved it using an answer (not the primary answer) from this post: What's the best way to detect a 'touch screen' device using JavaScript?

I added var supportsTouch = 'ontouchstart' in window || navigator.msMaxTouchPoints;

And then used if(supportsTouch)

Using A-frame isMobile in one function seems to block all other functions if it evaluates to false

1 Answers1