Jump to content

Errant mouse click on mobile devices


Recommended Posts

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';
.controller('FieldCtrl', function (UserModel, $state, $log) {
  var ctrl = this;
  var initialized = false;
  var renderer;
  ctrl.exit = function () {
  ctrl.next = function () {
    $log.info('Field:going to 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;
      //var renderer = PIXI.autoDetectRenderer(1200, parentElement.offsetHeight);
      initialized = true;
    } 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...
    // 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 ");
    stage.mousemove = stage.touchmove = function (moveData) {
    stage.mouseup = stage.touchstop = function (moveData) {
      //console.log("mouseup: " + globalPoint);
    function tearDown() {
      while(stage.children[0]) {
        var child = stage.children[0];
      document.getElementById('field').removeChild( renderer.view );
    function animate() {
      // render the stage
    requestAnimationFrame( animate );


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...