Question

我的点击事件无法在任何版本的ie中使用，我无法真正找到解决方案。

奇怪的是，如果我用鼠标移动我的mousedown它会起作用，这意味着事件会正确地进入pixijs画布，但在我的项目中，mousemove不是一个选项。

以下是相关代码：

// 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 一起工作时遇到的与此主题相关的另一个但有些相关的案例。

我正在为所有屏幕开发游戏：台式机，标签，移动设备。
我将此功能用于触摸事件：

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

每当没有可用的真实设备时，我总是使用chrome开发人员工具并选择移动屏幕（无响应屏幕）来测试游戏。

有一次，我尝试在没有chrome开发人员工具和默认桌面浏览器屏幕的情况下测试游戏，但发现我无法与游戏进行交互元素。

因此，我研究代码以了解这个问题。然后，在进行一些 pixiJS 文档查找之后，我将tap事件更改为mousedown事件，从而解决了该问题。

我的最终实现是使用单个回调函数并注册到tap和mousedown事件。

pixijs mousedown事件无效（任何版本）

2 个答案: