Kineticjs 中的指针事件答案

【问题标题】：pointer-events in KineticjsKineticjs 中的指针事件
【发布时间】：2013-03-20 09:46:46
【问题描述】：

在 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 事件不起作用。

【问题讨论】：

发布一些代码，其中包含您的工作示例以及您尝试过的不工作的示例，人们会提供更多帮助。
好的。我编辑帖子原文

标签： kineticjs

【解决方案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>

【讨论】：

编辑：对不起，我看不太清楚...我试试看！
是的！！！！非常感谢朋友！这正是我所需要的。谢谢，谢谢，非常感谢！
但是没有像 setListening 这样的方法！... 文档中也没有，也没有 kinetic-v5.1.0.js ((
KineticJS 语法自此答案以来发生了变化，并且经常发生重大变化。现在的语法是：node.listening(false); 请确保您继续关注更改日志：github.com/ericdrowell/KineticJS/wiki/Change-Log