lufy's legend

标题: 关于event.target [打印本页]

作者: donnier 时间: 2016-12-12 14:47
标题: 关于event.target
帮忙看下，为什么点击最上层，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 时间: 2016-12-12 18:57
这里有说明
http://lufylegend.com/api/zh_CN/ ... property_MOUSE_DOWN

作者: donnier 时间: 2016-12-13 10:12
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 时间: 2016-12-13 10:15
我再body层加入tool层,tool层加入toolIn层，再加入point层
point点击的时候输出event.target.name是toolIn，案例来说是point层才对

作者: lufy 时间: 2016-12-13 10:50

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

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

作者: donnier 时间: 2016-12-13 15:28
大神，我一张图片，加了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 时间: 2016-12-13 15:30
http://lufylegend.com/html5/lufylegend/ps.html
比如下面加个按钮，点击旋转60度，你这些控制点肯定就不对了，有什么好的方法，旋转后也能准确的取到对应的控制点

作者: lufy 时间: 2016-12-13 16:22

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

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

作者: donnier 时间: 2016-12-13 21:20
我是所说的不是旋转控制点，而是类似这些红色的控制点

作者: donnier 时间: 2016-12-13 22:52
http://lufylegend.com/html5/lufylegend/ps.html
我是所说的不是旋转控制点，而是类似这些红色的控制点

作者: lufy 时间: 2016-12-14 09:07

donnier 发表于 2016-12-13 22:52
http://lufylegend.com/html5/lufylegend/ps.html
我是所说的不是旋转控制点，而是类似这些红色的控制点 ...

原理是一样的

欢迎光临 lufy's legend (http://lufylegend.com/forum/)