Kineticjs中的指针事件 [英] pointer-events in Kineticjs
本文介绍了Kineticjs中的指针事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在Kinetik中，如果我有这个话:
In Kinetik, if I have this:
-
带有事件对象的图层
A layer with objects with events
上面，我还有一层对象重叠的物体
Above, I have another layer with overlapping objects
如何保留第1层事件?
(类似于CSS中的指针事件属性?)
(Something like pointer-events property in CSS?)
谢谢:)！
例如:
在第1层中:`
var bolinche = new Kinetic.Circle({
x: this.coordBolincheX,
y: this.coordBolincheY,
......
bolinche.on('mouseup', function() {
var getId = this.getId();
obDibujaFiguras.creaTrazados(getId);
});
`
在第2层中，同一位置的另一个形状.
In layer 2, another shape in the same place.
然后，事件bolinche.on无法正常工作.
Then, the event bolinche.on not work.
推荐答案
是的，您可以像单击指针事件一样，将顶层单击到底层:无
您只是告诉您的顶层不听事件……就像这样:
You just tell your top layer not to listen to events…like this:
myTopLayer.setListening(false);
现在，所有鼠标事件都会冒泡到最底层.
Now all mouse events will bubble down to the bottom layer.
这里是代码和小提琴: http://jsfiddle.net/m1erickson/WyW44/
Here’s code and a Fiddle: http://jsfiddle.net/m1erickson/WyW44/
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p>Green is on top layer</p>
<p>Blue is on bottom layer</p>
<p>You can click through the green rect to the blue rect</p>
<p>Works because green layer has "listening=false"</p>
<div id="container"></div>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.4.0-beta.js"></script>
<script>
var stage = new Kinetic.Stage({
container: 'container',
width: 400,
height: 200
});
var layerUnder = new Kinetic.Layer();
stage.add(layerUnder);
var layerOver = new Kinetic.Layer();
stage.add(layerOver);
var box1 = new Kinetic.Rect({
x: 75,
y: 30,
width: 100,
height:100,
fill: "blue",
stroke: 'black',
strokeWidth: 6,
draggable: true
});
layerUnder.add(box1);
layerUnder.draw();
var box2 = new Kinetic.Rect({
x: 100,
y: 50,
width: 100,
height:100,
fill: "green",
stroke: 'black',
strokeWidth: 6
});
layerOver.add(box2);
layerOver.draw();
// turn off mouse event listening for the top layer
// now you can click/drag the bottom layer even if the top rect obstructs
layerOver.setListening(false);
// listen for clicks on the bottom layer box
box1.on('click', function(evt){ alert("You clicked the bottom blue rectangle!"); });
</script>
</body>
</html>
这篇关于Kineticjs中的指针事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
