在动力学组中从形状移动到圆形时触发 mouseenter / mouseleave 事件

Question

我有包含自定义形状和圆形的 Kinetic 组。 Mouseenter 和 mouseleave 事件在 group 级别上指定。 当我从形状移动到圆形时，反之亦然，事件被触发，这（我猜）是不正确的，因为我一直在组之上。

  var stage = new Kinetic.Stage({
    container: 'container',
    width: 400,
    height: 300
  });
  var shapesLayer = new Kinetic.Layer();

  var group = new Kinetic.Group({
    x: 100,
    y: 40,
    listening: true
  });

      var square = new Kinetic.Shape({
         sceneFunc: function(context) {
           context.beginPath();
           context.moveTo(50, 50);
           context.lineTo(150, 50);
           context.lineTo(150, 100);
           context.lineTo(50, 100);
           context.lineTo(50, 50);
           context.closePath();
           // KineticJS specific context method
           context.fillStrokeShape(this);
         },
         fill: 'red',
         stroke: 'black',
         strokeWidth: 4
       });

      var circle =  new Kinetic.Circle();
        circle.x( 75 );
        circle.y( 75);
        circle.fill( 'LightGray' );
        circle.stroke( 'Gray' );
        circle.strokeWidth( 2 );
        circle.strokeEnabled( true );
        circle.listening(true);
        circle.draggable( true );
        circle.radius( 10 );

      group.add(square);
      group.add(circle);

  group.on( 'mouseenter', function( evt ) {         
        document.body.style.cursor = 'pointer';
    } );

  group.on( 'mouseleave', function( evt ) {         
        document.body.style.cursor = 'default';
    } );
  shapesLayer.add(group);
  stage.add(shapesLayer); `

在此处查看示例中的鼠标指针：http://jsfiddle.net/69K59/2/

Answer 1

组本身上的鼠标移动不会触发鼠标事件。

节点（形状、圆形等）上的鼠标事件触发鼠标事件。

这就是为什么你从圆圈移动到矩形时会得到离开+进入的原因。