JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.0.min.js"></script>
<p>Move mouse out of kinetic stage</p>
<p>Indicator will tell if mouse was also pressed</p>

<h3 id="indicator">Indicator</h3>

<div id="container"></div>

CSS

#container {
    border:solid 1px #ccc;
    margin-top: 10px;
    width:200px;
    height:200px;
}

JavaScript

var stage = new Kinetic.Stage({
    container: 'container',
    width: 200,
    height: 200
});
var layer = new Kinetic.Layer();
stage.add(layer);

var isDown = false;

$(stage.getContent()).on('mousedown', function (e) {
    isDown = true;
});
$(stage.getContent()).on('mouseup', function (e) {
    isDown = true;
});
$(stage.getContent()).on('mouseout', function (e) {
    if (isDown) {
        $("#indicator").text("Moved out and mouse was pressed");
    } else {
        $("#indicator").text("Moved out and mouse was not pressed");
    }
    isDown = false;
});

layer.draw();