Как передать события в холст {pointer-events: none}; (! in KonvaJS)

Question

Суть названия описана и представлена ​​в моем example. Моя задача - создать псевдоформу. Вам нужно навести на элемент холста (треугольник), свойство принятого холста {pointer-events:all} и уход с этим элементом {pointer-events:none}. Как это можно сделать, используя рамки konvajs.

/*NON GIST*/ 
 
    var stage=new Konva.Stage({container:'container',width:300,height:300}) 
 
     ,layer=new Konva.Layer() 
 
     ,triangle=new Konva.RegularPolygon({x:80,y:120,sides:3,radius:80,fill:'#00D2FF',stroke:'black',strokeWidth:4}) 
 
     ,text=new Konva.Text({x:10,y:10,fontFamily:'Calibri',fontSize:24,text:'',fill:'black'}); 
 
    function writeMessage(message){text.setText(message);layer.draw();} 
 
    /*GIST*/ 
 
     triangle.on('mouseout', function() { 
 

 
      $('#container').css('pointer-events',/*!*/'none'); 
 

 
      writeMessage('Mouseout triangle'); 
 
     }); 
 
     
 
     /*! How do I know if the events are not tracked on the canvas?*/ 
 
     triangle.on('mousemove', function() { 
 

 
      $('#container').css('pointer-events',/*!*/'all'); 
 
      
 
      var mousePos = stage.getPointerPosition(); 
 
      var x = mousePos.x - 190; 
 
      var y = mousePos.y - 40; 
 
      writeMessage('x: ' + x + ', y: ' + y); 
 
     }); 
 
    /*/GIST/*/ 
 
    layer.add(triangle); 
 
    layer.add(text); 
 
    stage.add(layer);

body{ 
 
     margin: 0; 
 
     padding: 0; 
 
     overflow: hidden; 
 
     background-color: #F0F0F0;} 
 
    #container{ 
 
     position:absolute; 
 
     z-index:1; 
 
    } 
 
    .lower-dom-element{ 
 
     position:absolute; 
 
     z-index:0; 
 
     padding:20px; 
 
     background:#0e0; 
 
     top: 90px; 
 
     left: 0px;}

 <script src="https://cdn.rawgit.com/konvajs/konva/0.9.0/konva.min.js"></script> 
 
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
 

 
    <div id="container"></div> 
 
    <div class="lower-dom-element"> 
 
     If the POINTER-EVENTS on me, then canvas POINTER-EVENTS:NONE, and vice versa. 
 
     If the events are not on the triangle, then the event with me. 
 
     </div>

PS: извините за мой английский.

Answer 1

Демо: http://jsfiddle.net/vfp22dye/3/