javascript - 如何将事件传递到动力学中的以下节点

Question

question that is very similar but answer doesn't work in my situation

我有一个圆圈，我想将单击事件传递给其下方的任何对象。

我已经尝试过:

将cancelbubble 设置为 false。 将圆形图层设置为 Listening= false 对我来说不起作用，因为圆形不再可拖动。

我做了一个 fiddle here

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

    var colorPentagon = new Kinetic.RegularPolygon({
      x: 80,
      y: stage.getHeight() / 2,
      sides: 5,
      radius: 70,
      fill: 'red',
      stroke: 'black',
      strokeWidth: 4,
      draggable: true
    });
    colorPentagon.on('click', function(evt){ alert("pentagon");});

    var linearGradPentagon = new Kinetic.RegularPolygon({
      x: 360,
      y: stage.height()/2,
      sides: 5,
      radius: 70,
      fillLinearGradientStartPoint: {x:-50, y:-50},
      fillLinearGradientEndPoint: {x:50,y:50},
      fillLinearGradientColorStops: [0, 'red', 1, 'yellow'],
      stroke: 'black',
      strokeWidth: 4,
      draggable: true
    });
    linearGradPentagon.on('click', function(evt){ alert("pentagon");});

    var radialGradPentagon = new Kinetic.RegularPolygon({
      x: 500,
      y: stage.height()/2,
      sides: 5,
      radius: 70,
      fillRadialGradientEndRadius: 70,
      fillRadialGradientColorStops: [0, 'red', 0.5, 'yellow', 1, 'blue'],
      stroke: 'black',
      strokeWidth: 4,
      draggable: true
    });
    radialGradPentagon.on('click', function(evt){ alert("pentagon");});

    background.add(colorPentagon);
    //background.add(patternPentagon);
    background.add(linearGradPentagon);
    background.add(radialGradPentagon);
    stage.add(background);


  var hideCircle = new Kinetic.Circle({
    x: stage.width()/2,
    y: stage.height()/2,
    radius: 650,
    stroke: 'black',
    strokeWidth: 1000,
      draggable:true
  });

 hideCircle.on('click', function(evt){ alert("click");});


  // add the shape to the layer
  layer.add(hideCircle);

  // add the layer to the stage
  stage.add(layer);

目前，为了使其正常工作，我必须获取点击坐标并进行自己的检测。它有效，但我希望有更优雅的东西。

Answer 1

以下是如何将点击事件传递到底层节点:

• 您可以在舞台上聆听点击声

• 判断点击是否在底层任意节点内

• 如果单击发生在节点内部，则触发该节点上的单击事件。

这里是示例代码和演示:http://jsfiddle.net/m1erickson/sFX8y/

stage.on('contentClick',function(e){

    // get the mouse position
    var pos=stage.getPointerPosition();

    // fetch the node on the bottom layer that is under the mouse, if any.
    var hitThisNode=background.getIntersection(pos);

    // if a node was hit, fire the click event on that node
    if(hitThisNode){
        hitThisNode.fire("click",e,true);
    }
});