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

【问题标题】：How do I 'forward' (mouse) events to a node/shape on a lower Zindex in kineticjs如何在 kineticjs 中将事件“转发”（鼠标）到较低 Zindex 上的节点/形状
【发布时间】：2012-12-17 16:36:14
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript kineticjs

【解决方案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 属性也可以为单个元素设置。

【讨论】：