How to transfer events into the canvas { pointer-events : none }; (!in KonvaJS)

Question

The essence of the title is described and presented in my example. My task is to make the pseudo shape. You need to hover on the canvas element (triangle), canvas accepted property {pointer-events:all}, and the care with this element {pointer-events:none}. How this can be done using the framework 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: sorry for my english.

Answer 1

var $con = $('#container');
$(document.body).mousemove(function(event) {
    var x = event.clientX, y = event.clientY;
    var offset = $con.offset();
    // manually check intersection
    if (layer.getIntersection({x: x - offset.left, y: y - offset.top})){        
        $con.css('pointer-events',/*!*/'all');
    } else {
        $con.css('pointer-events',/*!*/'none');
    }
});

Demo: http://jsfiddle.net/vfp22dye/3/