Errant mouse click on mobile devices

[whistlestop]

Hello, new to Pixi.js so am guessing I must be doing something wrong here.  I am building a Cordova application that will run in a browser as well as iOS and Android devices.  I am using Angular for all of the flow and UI controls and then PIXI for specific page that needs to render a 2D image that allows the user to select a location on the image that I'll then draw a sprite.

 

I have the basic flow working as expected and when I run it in Chrome everything works as expected but when I run it on a mobile device I seem to get an errant mousedown as soon as the PIXI stuff loads (I see the background image load and then the mousedown fires without any user interaction).

 

Is there something different I need to do on a Mobile device as opposed to a browser?

 

The relevant code is:

 

'use strict';

 

angular.module('gametrack')

.controller('FieldCtrl', function (UserModel, $state, $log) {

  var ctrl = this;

  var initialized = false;

  var renderer;

 

  ctrl.exit = function () {

    $log.info('exit');

    $state.go('login');

  };

 

  ctrl.next = function () {

    $log.info('Field:going to Stat');

    $state.go('stat');

  };

 

  ctrl.renderField = function () {

 

    var parentElement = document.getElementById('field');

 

    if (!renderer) {

      console.log("Getting Renderer")

      renderer = PIXI.autoDetectRenderer(parentElement.clientWidth, parentElement.clientWidth/2.0);

    }

 

    if (!initialized) {

      var info = 'window.width: ' + window.innerWidth + 'window.height: ' + window.innerHeight + ' width: ' + parentElement.clientWidth + ' height: ' + parentElement.offsetHeight;

      //alert(info);

      //alert(parentElement);

 

      //var renderer = PIXI.autoDetectRenderer(1200, parentElement.offsetHeight);

      parentElement.appendChild(renderer.view);

      initialized = true;

      console.log("Initialized")

 

    } else {

      console.log("skipping initialization")

    }

    // create the root of the scene graph

    var stage = new PIXI.Container();

    stage.interactive = true;

 

    // create a background...

    var background = PIXI.Sprite.fromImage('assets/images/field_texture.png');

    background.width = renderer.width;

    background.height = renderer.height;

 

    stage.hitArea = new PIXI.Rectangle(0, 0, background.width, background.height);

 

    // add background to stage...

    stage.addChild(background);

 

    // create a texture from an image path

    var homeShotTexture = PIXI.Texture.fromImage('assets/images/home_shot.png');

    var homeGoalTexture = PIXI.Texture.fromImage('assets/images/home_goal.png');

    var opponentShotTexture = PIXI.Texture.fromImage('assets/images/opponent_shot.png');

    var opponentGoalTexture = PIXI.Texture.fromImage('assets/images/opponent_goal.png');

 

    stage.mousedown = stage.toushstart = function (moveData) {

      console.log("mousedown ");

      {{ctrl.next();}}

    };

 

    stage.mousemove = stage.touchmove = function (moveData) {

      //console.log("mousemove");

    };

 

    stage.mouseup = stage.touchstop = function (moveData) {

      //console.log("mouseup: " + globalPoint);

    };

 

    function tearDown() {

      cancelAnimationFrame(animate);

      while(stage.children[0]) {

        var child = stage.children[0];

        stage.removeChild(stage.children[0]);

        child.destroy();

      }

      document.getElementById('field').removeChild( renderer.view );

    }

 

    function animate() {

 

      requestAnimationFrame(animate);

 

      // render the stage

      renderer.render(stage);

    }

 

    requestAnimationFrame( animate );

  };

});

 

 

[ivan.popelyshev]

Code looks ok, its something with cordova itself. 

 

P.S. FieldCtrl looks like singleton thing, if you re-create element and controller, old element will be updated anyway because you dont use cancelAnimationFrame.