javascript - 如何在 kineticjs 中将事件“转发”（鼠标）到较低 Zindex 上的节点/形状

Question

我正在使用 kineticjs，其中有一个带有一层的舞台。该图层上有多个形状，它们对鼠标悬停事件做出反应（它们显示工具提示）除了这些形状之外，我还有一些位于更高 ZIndex 上的文本节点（因此它们位于形状上方）。

这一切都很好，除了一个例外，当文本位于形状顶部时，形状不显示工具提示我认为这是因为 textnode 使用事件，而不是“转发”它，即使我没有绑定任何东西到文本节点。

如何将事件传播到较低 ZIndex 上的节点？

Answer 1

就我个人而言，我会创建一个单独的图层来放置您不想注册鼠标事件的任何内容，并且在创建图层时将其listening属性设置为 false。
您还可以为单个元素设置 this 属性。
这是一个使用图层的示例...

var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 200
});

var normalLayer = new Kinetic.Layer();
var textLayer = new Kinetic.Layer({listening :false});

var rect = new Kinetic.Rect({
    x: 20,
    y: 20,
    width: 100,
    height: 50,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 4
});

rect.on('click', function(evt) {
    this.setFill('blue');
    normalLayer.draw();
});

normalLayer.add(rect);

var simpleText = new Kinetic.Text({
        x: 40,
        y: 40,
        text: 'Simple Text',
        fontSize: 30,
        fontFamily: 'Calibri',
        textFill: 'yellow'
      });

textLayer.add(simpleText);

stage.add(normalLayer);
stage.add(textLayer);

http://jsfiddle.net/MT435/
请记住，listening也可以为单个元素设置属性。