pixijs 鼠标关闭事件不起作用(任何版本）

pixijs mousedown event not working (any version)

本文关键字：任何 版本 不起作用 事件 鼠标 pixijs      更新时间：2023-09-26

我的点击事件在任何版本的IE中都不起作用，我真的找不到解决方案。

奇怪的是，如果我将鼠标向下与鼠标移动交换，它可以工作，这意味着事件可以正确进入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);
        }
    }
});

你确定，你的代码中没有任何其他错误，因为你显示的内容看起来是正确的。

我创造了一个小提琴在这里看到的内容：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);

这是我在使用 pixiJS 时进入的另一个与该主题相关的案例。

  1. 我正在开发一款适用于所有屏幕的游戏：桌面、标签、移动。
  2. 我将此功能用于触摸事件： 
     aPIXIContainerOrSprite.on("tap", event => {
          /* some action */
        });

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

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

因此，我查看代码以了解该问题。然后经过一些 pixiJS 文档查找后，我将tap事件更改为mousedown事件，这解决了问题。

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

相关文章：