Pixi.js 推送 intel-xdk 文件后触摸事件未在 iPhone 上触发

Question

我创建了一个小型测试项目来重现该问题。该项目仅包含 pixi.min.js 和 index.html 以及此示例中的代码：

http://pixijs.github.io/examples/index.html?s=demos&f=interactivity.js&title=Interactivity

当我通过浏览器测试时，按钮可以正常工作。它们也在 intel-xdk emulate 选项卡中工作。

但是当我转到test选项卡、推送文件、扫描二维码以打开在iphone上创建的应用程序时，按钮出现但触摸事件不起作用。

为什么 iPhone 上的触摸事件没有触发？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body style="margin:0; padding: 0; background: #333333;">
    <script src="pixi.min.js"></script>
    <script>
        var renderer = PIXI.autoDetectRenderer(800, 600);
        document.body.appendChild(renderer.view);

        var stage = new PIXI.Container();

        var textureButton = PIXI.Texture.fromImage('images/button.png');
        var textureButtonDown = PIXI.Texture.fromImage('images/button.png');
        var textureButtonOver = PIXI.Texture.fromImage('images/button2.png');

        var buttons = [];

        var buttonPositions = [
            175, 75,
            655, 75,
            410, 325,
            150, 465,
            685, 445
        ];

        var noop = function () {
            //console.log('click');
        };

        for (var i = 0; i < 5; i++)
        {
            var button = new PIXI.Sprite(textureButton);
            button.buttonMode = true;

            button.anchor.set(0.5);

            button.position.x = buttonPositions[i*2];
            button.position.y = buttonPositions[i*2 + 1];
            button.interactive = true;

            button.on('mousedown', onButtonDown)
                .on('touchstart', onButtonDown)
                .on('mouseup', onButtonUp)
                .on('touchend', onButtonUp)
                .on('mouseupoutside', onButtonUp)
                .on('touchendoutside', onButtonUp)
                .on('mouseover', onButtonOver)
                .on('mouseout', onButtonOut);

            button.tap = noop;
            button.click = noop;
            stage.addChild(button);
            buttons.push(button);
        }
        buttons[0].scale.set(1.2);
        buttons[2].rotation = Math.PI / 10;
        buttons[3].scale.set(0.8);
        buttons[4].scale.set(0.8,1.2);
        buttons[4].rotation = Math.PI;

        animate();

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

        function onButtonDown(){
            this.isdown = true;
            this.texture = textureButtonDown;
            this.alpha = 1;
        }

        function onButtonUp(){
            this.isdown = false;
            if (this.isOver){ this.texture = textureButtonOver;
            }else{ this.texture = textureButton; }
        }

        function onButtonOver(){
            this.isOver = true;

            if (this.isdown){
                return;
            }
            this.texture = textureButtonOver;
        }

        function onButtonOut(){
            this.isOver = false;
            if (this.isdown){ return; }
            this.texture = textureButton;
        }
    </script>
</body>
</html>

Answer 1

var textureButton = PIXI.Texture.fromImage('images/button.png');
var textureButtonDown = PIXI.Texture.fromImage('images/button.png');
var textureButtonOver = PIXI.Texture.fromImage('images/button2.png');

它正在 iPhone 上工作，但您没有看到任何事情发生，因为您的初始按钮图像 textureButton 和 textureButtonDown 相同 (button.png)。因此，当您触摸它时，您在屏幕上看不到任何差异。 iPhone 上没有 hover 触摸事件，因此 textureButtonOver 未应用

但是当你在模拟器上测试时，你使用的是鼠标，所以当你将鼠标移到按钮上时 textureButtonOver 会应用并且你会在屏幕上看到变化。

所以将 textureButtonDown 更改为不同的图像 (button3.png)，您将看到它在 iPhone

上工作

Pixi.js 推送 intel-xdk 文件后触摸事件未在 iPhone 上触发

Pixi.js touch events not firing on iPhone after pushing intel-xdk files

javascript

intel-xdk

pixi.js