关于event.target

donnier

帮忙看下，为什么点击最上层，event.target是s2，大神能帮忙解释下吗
下面是代码

               <script>
function main() {
        LGlobal.setDebug(true);

        //创建第1层(黑色)
        var s1 = new LSprite();
        s1.graphics.drawRect(0, '#000000', [0, 0, 1200, 1200], true, '#000000');
        s1.name='s1';

        //创建第2层(红色)
        var s2=new LSprite();
        s2.graphics.drawRect(0, '#000000', [0, 0, 800, 800], true, '#ff0000');
        s2.name='s2';

        //创建第3层(绿色)
        var s3=new LSprite();
        s3.graphics.drawRect(0, '#000000', [0, 0, 400, 400], true, '#00ff00');
        s3.name='s3';

        s2.addChild(s3);
        s1.addChild(s2);
        addChild(s1);


        
        // s3.addEventListener(LMouseEvent.MOUSE_DOWN, function(event) {
        //     trace(event.target.name);
        // });
        s3.addEventListener(LMouseEvent.MOUSE_DOWN, function(event) {
            trace(event.target.name);
        });
        s1.addEventListener(LMouseEvent.MOUSE_DOWN, function(event) {
            trace(event.target.name);
        });
        

}
init(50, 'legend', 1200, 1200, main);
</script>

lufy

这里有说明
http://lufylegend.com/api/zh_CN/ ... property_MOUSE_DOWN

donnier

point点击的时候event.target.name为什么是toolIn,这地方不太明白，应该是point才对
大神能帮忙分析下吗
        <script>
function main() {
        LGlobal.setDebug(true);
        var body=new LSprite();
        body.name='body'
        body.graphics.drawRect(0, '#000000', [0, 0, 1200, 1200], true, '#000000');
        addChild(body);

        var tool=new LSprite();
        tool.name='tool';
        body.addChild(tool);

        var shape = new LShape();
                shape.graphics.drawRect(0, '#000000', [0, 0, 800, 800], true, '#ff0000');
                shape.alpha = 1;
                shape.name='shape';

                var toolIn=new LSprite();
                toolIn.name='toolIn';
                toolIn.addChild(shape);
                tool.addChild(toolIn);

                var point=new LSprite();
                point.name='point';
                point.graphics.drawArc(2, "#3fb8af", [0, 0, 8, 0, 2 * Math.PI], true, "#ffffff");
                toolIn.addChild(point);




      
        point.addEventListener(LMouseEvent.MOUSE_DOWN, function(event) {
            trace('point Click'+'='+event.target.name);
            //这里按理来说应该是point
        });


          tool.addEventListener(LMouseEvent.MOUSE_DOWN, function(event) {
            trace('tool Click'+'='+event.target.name);
        });
        

}
init(50, 'legend', 1200, 1200, main);
</script>

donnier

我再body层加入tool层,tool层加入toolIn层，再加入point层
point点击的时候输出event.target.name是toolIn，案例来说是point层才对

lufy

donnier 发表于 2016-12-13 10:15
我再body层加入tool层,tool层加入toolIn层，再加入point层
point点击的时候输出event.target.name是toolIn ...

引擎中判断点击事件的时候，是由底层开始逐层判断的
当判断到tool的时候，确定了点中的目标toolIn，所以同时触发的点击事件中，target都变成了toolIn
你去掉 tool.addEventListener 试一下，应该就没问题了
这是由于引擎中的不严格的判断导致的，以后有机会我会试着调整一下的，如果加载事件的时候，不采取这样连环嵌套的方式的话，是不会有这个问题的

donnier

大神，我一张图片，加了4个控制点，可以移动，缩放，旋转，之前采取的上面那种方式，各个元素绑定事件, 但是有事件嵌套问题

今天我换了种方式（如下面代码），类似你这种根据点击的位置来进行事件处理，移动和缩放没问题，但是旋转后，控制点就不对了，有什么好的方法吗
for(i = 0;i < pointList.length;i++){
                obj = pointList[i];
                if(Math.pow(obj.x-mouseX,2)+Math.pow(obj.y-mouseY,2) < Math.pow(20,2)){
                        mouseObj = obj;
                        mouseObj.index = i*2;
                        mouseObj.mouseX = mouseX;
                        mouseObj.mouseY = mouseY;
                        mouseObj.saveX = mouseObj.x;
                        mouseObj.saveY = mouseObj.y;
                        break;
                }
        }

donnier

http://lufylegend.com/html5/lufylegend/ps.html
比如下面加个按钮，点击旋转60度，你这些控制点肯定就不对了，有什么好的方法，旋转后也能准确的取到对应的控制点

lufy

donnier 发表于 2016-12-13 15:30
http://lufylegend.com/html5/lufylegend/ps.html
比如下面加个按钮，点击旋转60度，你这些控制点肯定就不 ...

http://lufylegend.com/forum/foru ... &extra=page%3D1
第三种方法

donnier

我是所说的不是旋转控制点，而是类似这些红色的控制点

donnier

http://lufylegend.com/html5/lufylegend/ps.html
我是所说的不是旋转控制点，而是类似这些红色的控制点