按intel-xdk文件后，Pixi.js触摸事件不会在iPhone上触发。
我创建了一个小测试项目来复制这个问题。该项目仅包含pixi.min.js和index.html，其中包含此示例中的代码：
http://pixijs.github.io/examples/index.html?s=demos&f=interactivity.js&title=Interactivity
当我通过浏览器测试它时，按钮可以工作。它们还可以在intel-xdk emulate选项卡中工作。
但是当我转到test选项卡，推送文件，扫描QR代码在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>回答 1
Stack Overflow用户
发布于 2015-12-15 01:18:31
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 It (button.png)。所以当你触摸到它时，你不会在屏幕上看到任何不同。在iPhone上，没有用于触摸事件的hover事件，因此不应用textureButtonOver。
但是当你在模拟器上测试时，你使用的是鼠标，所以当你把鼠标移到textureButtonOver按钮上时，你会在屏幕上看到一个变化。
因此，将textureButtonDown更改为不同的映像(button3.png)，您将看到它在iPhone上工作。
https://stackoverflow.com/questions/34248488
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号