javascript - 触摸事件未注册使用 Flash CC 的 HTML5 Canvas 创作

Question

在 Flash CC 中创作 HTML 5 Canvas 时，我遇到了一些问题，主要是因为缺乏有关在 Flash 中编写 JavaScript 的信息。

我一直在将现有的拖放 .fla 转换为 HTML 5，希望使其与 iOS 和 Android 兼容。它已经可以使用鼠标，但我在尝试添加触摸支持时遇到了障碍。

我什至能够注册触摸事件的唯一方法是监听整个窗口，当我有多个要移动的部分时，这不是很有用。

这是我目前所拥有的，所有这些代码都位于主场景时间轴的第一帧上，场景由 5 个部分和这些部分的 5 个目标组成，以及一个弹出的任务完成框和一个重置按钮。

this.stop();
MainStage = this;//Declare 

//*********************
//Actual Drag and Dropping

// Initialize:
var numPieces = 5;//<---------------Place number of pieces HERE---------------
var homePosX = [];
var homePosY = [];
var correctAns = 0;
var isClickableAry = [];
var whoAmI = [];//Declared "Globally" so that I can identify which piece is being grabbed later

for (var i = 0; i < numPieces; i++)
{
    var pieceName = "p" + (i + 1);
    var piece = this[pieceName];
    //This sets the starting position for each piece    
    homePosX[i+1] = piece.x;//(i+1) is so that Piece names line up with Target names and MC names
    homePosY[i+1] = piece.y;
    whoAmI[i] = piece;
    isClickableAry[i] = 1;//Makes it so each pieces is set as clickable



if( piece ){
    piece.name = pieceName;
    piece.on("mousedown" || "touchstart", function(evt)
    {
        evt.preventDefault();
//Debug
        console.log(checkPiece(this));
//Rather than adding and removing event listeners, just check to see if piece is clickable
    if(isClickableAry[checkPiece(this)] == 1){

        this.parent.addChild(this);// Bump to top
        this.offset = {x:this.x - evt.stageX, y:this.y - evt.stageY};
//Debug
        console.log(piece + "PICKED UP, X " + piece.x + ", Y " + piece.y + " is Clickable? ");
        //Set Home Coordinates (Where it was picked up)
        homeX = this.x;
        homeY = this.y;
    }
});
piece.on("touchmove",function(evt)
{

        console.log("touch moved! " + touchobj);

        evt.preventDefault();
});

piece.on("pressmove", function(evt)
{
    if(isClickableAry[checkPiece(this)] == 1){
        this.x = evt.stageX + this.offset.x;
        this.y = evt.stageY + this.offset.y;

        //Mouse Cursor change
        document.body.style.cursor='move';
    }
});
piece.on("pressup" || "touchend" || "touchcancel", function(evt)
{
    var target = this.parent["t"+this.name.substr(1)];
    //Reset Cursor
    document.body.style.cursor='auto';

    if( target && hitTestInRange( target, 60) && isClickableAry[checkPiece(this)] == 1 ){
        this.x = target.x;
        this.y = target.y;
        //If it is correct add one
        correctAns++;
        //Make that button Unclickable
        isClickableAry[checkPiece(this)] = 0;

        if(correctAns >= numPieces){

            //If they have answered correctly equal to the the number of pieces
            MainStage.complete_mc.parent.addChild(MainStage.complete_mc);//Bump to top
            MainStage.complete_mc.gotoAndStop(1);
            //reset answer counter and make drag pieces and buttons unclickable
            correctAns = 0;
//Debug             
            console.log(correctAns + "CORRECT!";)
        }


        }else{
            //Return to home Coordinates (Where it was on intialization)
            if(isClickableAry[checkPiece(this)] == 1){
                this.x = homePosX[checkPiece(this)+1];
                this.y = homePosY[checkPiece(this)+1];
            }
        }
    });
    piece.on("mouseover", function(evt)
    {
        if(isClickableAry[checkPiece(this)] == 1){
            //Makes cursor a pointer finger
            document.body.style.cursor='pointer';
        }
    });

    piece.on('mouseout',function(evt)
    {
        //sets cursor back to normal
        document.body.style.cursor='auto';
    });

}
}
function hitTestInRange( target, range )
{
if( target.x > stage.mouseX - range &&
target.x < stage.mouseX + range &&
target.y > stage.mouseY - range &&
target.y < stage.mouseY + range )
{
return true;
}
return false;
}
//Check which piece it is
function checkPiece(checkName)
{
for (var i = 0; i < numPieces; i++)
{
    if (checkName == whoAmI[i]){
    return i;
    }
}
}


//Reset Functionality

this.complete_mc.reset_btn.addEventListener("click", resetPos.bind(this));

function resetPos(){
for (var i = 0; i < numPieces; i++)
    {
        var pieceName = "p" + (i + 1);
        var piece = this[pieceName];
        correctAns = 0;
        //Makes Pieces Grabable again
        isClickableAry[i] = 1;          
        //This returns each piece to their Original Starting Positions          
        piece.x = homePosX[i+1];
        piece.y = homePosY[i+1];
    }
}

//Controlling the Pop Up Window, window pops up when user answers everything correctly 
this.complete_mc.exitComplete_btn.addEventListener("click", closePopUp.bind(this));
this.complete_mc.exitComplete_btn_alt. addEventListener("click", closePopUp.bind(this));

function closePopUp(){
MainStage.complete_mc.gotoAndStop(0);
}

在我自己解决其他问题时，通常问题与函数或变量的范围有关，因为当 Flash 导出文件时，它会生成自己的 .js 文件并将所有影片剪辑转换为代码并将您编写的代码分隔在您编写代码的任何框架上。
任何帮助都将不胜感激。

编辑:经过更多研究后，我认为问题可能与触摸事件只能针对单独的元素有关？所以它不能仅抓取 Canvas 元素本身的 Canvas 元素内的对象？

Answer 1

事实证明，添加触摸支持非常容易。我所缺少的只是一行代码createjs.Touch.enable(stage);这使得所有触摸事件响应为鼠标事件。并解决了我所有的问题。