Не работает событие pixijs mousedown (любая версия)

Question

Мои события клика не работают ни в одной версии, т.е. я не могу найти решение для этого.

Любопытно, что если я поменяю мой mousedown движением мыши, это сработает, что означает, что события правильно попадают на холст pixijs, но в моем проекте перемещение мышью не вариант.

Вот соответствующий код:

// This function gets called from somewhere else
var new_word = getRandomWord();
var color = new_word == currentWord ? 0xffffff : 0xffffff;
var fontSize = isSmallScreen ? Math.round(Math.random() * 10 + 10) : Math.round(Math.random() * 40 + 20);
var creationPadding = isSmallScreen ? 0 : 200;
var text = new PIXI.Text(new_word, {
            font: fontSize + 'px Clarendon',
            fill: color,
            dropShadow: !isTouchDevice,
            dropShadowColor: 0xffffff,
            dropShadowDistance: 0,
            dropShadowBlur: 8,
            dropShadowAlpha: .2,
            padding: 5,
            align: 'left'
        });
text.pivot.set(text.width / 2, text.height / 2);
text.position.x = getRandomArbitrary(creationPadding, renderer.width - creationPadding);
text.position.y = getRandomArbitrary(0, renderer.height - beer.position.y - 156);
text.rotation = degToRad(getRandomArbitrary(-20, 20));
text.interactive = true;
currentlyShownWords.push(text._text);

text.on('mousedown', function (e) {
    alert('mousedown');
    if (inGame) {
        e.stopPropagation();
        if (text._text == currentWord) {
            clickedCorrectWord(text);
        } else {
           clickedWrongWord(text);
        }
    }
});

Answer 1

Вы уверены, что в вашем коде нет никаких других ошибок, поскольку то, что вы показываете, выглядит правильно.

Я создал скрипку того, что видел здесь: https://jsfiddle.net/6bydjrpo/

var stage = new PIXI.Stage(0x97c56e, true);
var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);

var text = new PIXI.Text('Click me!', {
  font: '48px Clarendon',
  fill: 0xffffff,
  dropShadowColor: 0xffffff,
  dropShadowDistance: 0,
  dropShadowBlur: 8,
  dropShadowAlpha: .2,
  padding: 5,
  align: 'left'
});

text.pivot.set(text.width / 2, text.height / 2);
text.position.x = renderer.width / 2;
text.position.y = renderer.height / 2;
text.rotation = 0;
text.interactive = true;
stage.addChild(text);

text.on('mousedown', function (e) {
  alert('mousedown');
});

function animate() {
  renderer.render(stage);
  requestAnimationFrame(animate);
}

document.body.appendChild(renderer.view);
renderer.view.style.position = "absolute";
renderer.view.style.top = "0px";
renderer.view.style.left = "0px";
requestAnimationFrame(animate);

Answer 2

Вот еще один, но в некоторой степени относящийся к этой теме случай, с которым я столкнулся при работе с pixiJS.

1. Я разрабатывал игру для всех экранов: рабочий стол, вкладка, мобильный.
2. Я использовал эту функцию для сенсорных событий:

     aPIXIContainerOrSprite.on("tap", event => {
          /* some action */
        });

Когда реального устройства не было в наличии, я всегда тестировал игру, используя инструменты разработчика Chrome и выбирая мобильный экран (без адаптивного экрана).

Однажды я попытался протестировать игру без инструментов разработчика Chrome и экрана браузера по умолчанию на рабочем столе и обнаружил, что не могу взаимодействовать с игровыми элементами.

Поэтому я изучаю код, чтобы получить представление о проблеме. Затем, после небольшого просмотра документации pixiJS, я изменил tap событие в mousedown событие, и это решило проблему.

Моя последняя реализация состояла в том, чтобы использовать одну функцию обратного вызова и зарегистрировать ее как tap а также mousedown мероприятие.