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

【问题标题】：Pixi.js touch events not firing on iPhone after pushing intel-xdk files推送 intel-xdk 文件后 Pixi.js 触摸事件未在 iPhone 上触发
【发布时间】：2016-03-18 20:08:17
【问题描述】：

我创建了一个小型测试项目来复制问题。该项目仅包含 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>

【问题讨论】：

“不工作”是指点击它们时没有任何反应？
是的，事件没有触发。我更正了这个问题。
图片在哪里？它们的尺寸是多少？ button.png 和 button2.png

标签： javascript intel-xdk pixi.js

【解决方案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 上工作

【讨论】：

我刚刚使用了您的代码并更改了 button3.png，它在我的 iPhone 上运行了
太好了。我不知道我是怎么错过的 :) 谢谢你的帮助。