Javascript 我如何';前进';(鼠标)对kineticjs中较低Zindex上的节点/形状的事件
我正在使用kineticjs,我有一个舞台,里面有一层。该层上有多个形状,它们对鼠标悬停事件做出反应(显示工具提示) 除了这些形状之外,我还有一些更高的ZIndex上的文本节点(因此它们位于形状之上) 这一切都可以正常工作,但有一个例外,当文本位于形状顶部时,形状不会显示工具提示,我认为这是因为textnode使用事件,而不是“转发”事件,尽管我没有将任何内容绑定到文本节点Javascript 我如何';前进';(鼠标)对kineticjs中较低Zindex上的节点/形状的事件,javascript,kineticjs,Javascript,Kineticjs,我正在使用kineticjs,我有一个舞台,里面有一层。该层上有多个形状,它们对鼠标悬停事件做出反应(显示工具提示) 除了这些形状之外,我还有一些更高的ZIndex上的文本节点(因此它们位于形状之上) 这一切都可以正常工作,但有一个例外,当文本位于形状顶部时,形状不会显示工具提示,我认为这是因为textnode使用事件,而不是“转发”事件,尽管我没有将任何内容绑定到文本节点 如何将事件传播到较低ZIndex上的节点?我个人会创建一个单独的层来放置任何您不想在其上注册鼠标事件的内容,并在创建层时将
如何将事件传播到较低ZIndex上的节点?我个人会创建一个单独的层来放置任何您不想在其上注册鼠标事件的内容,并在创建层时将其
侦听属性设置为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);
请记住,侦听
属性也可以为单个元素设置