一，假设
假设，所有可添加鼠标事件的对象，都有一个mouseEvent方法，添加的鼠标事件同过这个mouseEvent来调用。
这样的话，添加鼠标事件，其实只需要给canvas添加一个鼠标事件，然后循环LGlobal类里的childList，即循环所有的可视对象，如果被添加了鼠标事件，那么就调用它相应的方法。

二，实现
1，给LGlobal类追加mouseEvent方法，然后修改LGlobal类的setCanvas，实现canvas的鼠标事件的添加与调用

JavaScript Code复制内容到剪贴板
LGlobal.setCanvas = function (id,width,height){  
        LGlobal.canvasObj = document.getElementById(id);  
        if(width)LGlobal.canvasObj.width = width;  
        if(height)LGlobal.canvasObj.height = height;  
        LGlobal.width = LGlobal.canvasObj.width;  
        LGlobal.height = LGlobal.canvasObj.height;  
        LGlobal.canvas = LGlobal.canvasObj.getContext("2d");  
      
    LEvent.addEventListener(LGlobal.canvasObj,LMouseEvent.MOUSE_DOWN,function(event){  
            LGlobal.mouseEvent(event,LMouseEvent.MOUSE_DOWN);  
        });  
}   
LGlobal.mouseEvent = function(event,type){  
        var key;  
        for(key in LGlobal.childList){  
                if(LGlobal.childList[key].mouseEvent){  
                        LGlobal.childList[key].mouseEvent(event,type);  
                }  
        }  
}  
2，给LSprite类添加mouseList数组，用来保存所添加的鼠标事件，然后添加mouseEvent方法
mouseEvent方法中，我们需要做2个处理，
1)，判断自己是否添加了鼠标事件，如果没有添加，则循环它的childList
2)，如果添加了鼠标事件，判断自己是否被点击,LSprite虽说意义上是可视类，但是其实目前它本身是不可见的，可见的是它上面的Bitmap,准确点说，是这个Bitmap类中的BitmapData,更准确点说，是这个BitmapData中的Image，所以判断自己是否被点击，需要判断的是LSprite中的childList中的可视对象是否被点击，如果被点击，则调用相应的方法

JavaScript Code复制内容到剪贴板
mouseEvent:function (event,type,cood){  
                if(cood==null)cood={x:0,y:0};  
                var self = this;  
                if(self.mouseList.length == 0){  
                        for(key in self.childList){  
                                if(self.childList[key].mouseEvent){  
                                        self.childList[key].mouseEvent(event,type,{x:self.x+cood.x,y:self.y+cood.y});  
                                }  
                        }  
                        return;  
                }  
                if(self.childList.length == 0)return;  
                var key;  
                var isclick = false;  
                for(key in self.childList){  
                        isclick = self.childList[key].ismouseon(event,{x:self.x+cood.x,y:self.y+cood.y});  
                        if(isclick)break;  
                }  
                if(isclick){  
                        for(key in self.mouseList){  
                                var obj = self.mouseList[key];  
                                if(obj.type == type){  
                                        event.selfX = event.offsetX - (self.x+cood.x);  
                                        event.selfY = event.offsetY - (self.y+cood.y);  
                                        event.currentTarget = self;  
                                        obj.listener(event);  
                                }  
                        }  
                        return;  
                }  
                  
        },  
        ismouseon:function(event,cood){  
                var self = this;  
                var key;  
                var isclick = false;  
                for(key in self.childList){  
                        isclick = self.childList[key].ismouseon(event,{x:self.x+cood.x,y:self.y+cood.y});  
                        if(isclick)break;  
                }  
                return isclick;  
        }  
 
ismouseon方法，用来判断自己是否被点击
LBitmap类中也需要判断是否自己被点击，所以添加ismouseon

JavaScript Code复制内容到剪贴板
ismouseon:function(event,cood){  
                var self = this;  
                if(event.offsetX >= self.x + cood.x && event.offsetX <= self.x + cood.x + self.width &&   
                        event.offsetY >= self.y + cood.y && event.offsetY <= self.y + cood.y + self.height){  
                        return true;  
                }else{  
                        return false;  
                }  
        }  

添加鼠标事件的时候，模仿ActionScript的语法

JavaScript Code复制内容到剪贴板
backLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown);  
复制代码
下面，准备一张地图，一个人物行走图，用鼠标事件来控制人物的走动，

JavaScript Code复制内容到剪贴板
init(80,"back",800,480,main);  
  
var list = new Array();  
var index = 0;  
var backLayer;  
//地图  
var mapimg;  
//人物  
var playerimg;  
var loader  
var imageArray;  
var animeIndex = 0;  
var dirindex = 0;  
var dirarr = new Array({x:0,y:1},{x:-1,y:0},{x:1,y:0},{x:0,y:-1},{x:-1,y:1},{x:1,y:1},{x:-1,y:-1},{x:1,y:-1});  
var dirmark = {"0,1":0,"-1,0":1,"1,0":2,"0,-1":3,"-1,1":4,"1,1":5,"-1,-1":6,"1,-1":7};  
  
//移动目标  
var toX = 0;  
var toY = 0;  
function main(){  
          
        loader = new LLoader();  
        loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);  
        loader.load("back.jpg","bitmapData");  
}  
function loadBitmapdata(event){  
        var bitmapdata = new LBitmapData(loader.content);  
        mapimg = new LBitmap(bitmapdata);  
        loader = new LLoader();  
        loader.addEventListener(LEvent.COMPLETE,loadOver);  
        loader.load("1.png","bitmapData");  
}  
function loadOver(event){  
        var bitmapdata = new LBitmapData(loader.content,0,0,70,92);  
        imageArray = LGlobal.divideCoordinate(bitmapdata.image.width,bitmapdata.image.height,8,8);  
        document.getElementById("inittxt").innerHTML="";  
        playerimg = new LBitmap(bitmapdata);  
        playerimg.bitmapData.setCoordinate(0,0);  
        index = 0;  
        backLayer = new LSprite();  
        addChild(backLayer);  
        backLayer.addChild(mapimg);  
        backLayer.addChild(playerimg);  
        backLayer.addEventListener(LEvent.ENTER_FRAME, onframe)  
        backLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown);  
}  
  
function onframe(){  
        index++;  
        if(index >= imageArray[0].length){  
                index = 0;  
        }  
        var markx = 0,marky = 0;  
        var l = 3;  
        if(playerimg.x > toX){  
                playerimg.x -= l;  
                markx = -1;  
        }else if(playerimg.x < toX){  
                playerimg.x += l;  
                markx = 1;  
        }  
        if(playerimg.y > toY){  
                playerimg.y -= l;  
                marky = -1;  
        }else if(playerimg.y < toY){  
                playerimg.y += l;  
                marky = 1;  
        }  
        if(markx !=0 || marky != 0){  
                var mark = markx+","+marky;  
                dirindex = dirmark[mark];  
        }  
        playerimg.bitmapData.setCoordinate(imageArray[dirindex][index].x,imageArray[dirindex][index].y);  
}  
function onmousedown(event){  
        toX = parseInt(event.selfX/3)*3;  
        toY = parseInt(event.selfY/3)*3;  
}  


转载请注明：睿美印象网站建设工作室www.ruimeiyx.com