Question

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

  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

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

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

这就是你从圆圈移动到直线时离开+进入的原因。

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

1 个答案: