Question

在Kinetik，如果我有这个：

包含具有事件的对象的图层
上面，我有另一个具有重叠对象的图层

如何保留第1层事件？

（像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层，另一个形状在同一个地方。

然后，事件bolinche.on无效。

Answer 1

是的，您可以点击顶层到底层，类似于指针事件：无

你只是告诉你的顶层不要听事件......就像这样：

myTopLayer.setListening(false);

现在所有鼠标事件都会向下冒泡到底层。

这是代码和小提琴：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中的指针事件

1 个答案: