Detect if mouse is leaving browser window with button pressed

Question

I'm using Kinetic.js for some dragging in my canvas and I'm trying to detect if the mouse leaves the browser window. Only difference is that I also want it to trigger when a mouse button is pressed while moving out.

This thread pretty much solves the question but if you press the left mouse button while moving out it doesn't work: Link

For me it seems that the mouseout event is being ignored as long as the left mouse button is pressed. I've done a test here. Any ideas?

On mousemove probably also on the drag event you could check the value of `x` and `y` of the mouse position if it is inside or outside of the window. For `top` and `left` it needs to be `>0` for the `bottom` and `right` you need the `height` and `width` of the viewport. — t.niese, Sep 22 '13 at 19:35

markE · Accepted Answer · 2013-09-23T01:27:47.230

You can set an isDown flag when the mouse is pressed. Then clear the isDown flag when the mouse is released. And track mouseout + the isDown flag to see if user is leaving with mouse pressed

Here's the jQuery version:

var isDown=false;

$(stage.getContent()).on('mousedown',function(e){ isDown=true; });
$(stage.getContent()).on('mouseup',function(e){ isDown=false; });
$(stage.getContent()).on('mouseout',function(e){ 
    console.log(isDown);
    isDown=false; 
});

Here's code and a Fiddle: http://jsfiddle.net/m1erickson/ZjKGS/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.0.min.js"></script>

<style>
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:400px;
  height:400px;
}
</style>        
<script>
$(function(){

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 300,
        height: 300
    });
    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();

}); // end $(function(){});

</script>       
</head>

<body>
    <p>Move mouse out of kinetic stage</p>
    <p>Indicator will tell if mouse was also pressed</p>
    <p id="indicator">Indicator</p>
    <div id="container"></div>
</body>
</html>

i tried it and for me it seems that the mouseout event listener doesn't work for leaving the window as long as the buttons is pressed — , Sep 22 '13 at 23:03
I had a glitch with my original code...I corrected and here's a Fiddle: http://jsfiddle.net/m1erickson/ZjKGS/ — markE, Sep 23 '13 at 01:27
so the trick was to work with the raw stage div and not a kinetic object? — , Sep 23 '13 at 13:35
UPDATE! How timely and ironic: The very newest version of kinetic (4.7.1 released today) now has internal stage mouse event handlers so you don't have to use jquery or javascript to monitor the "external" mouse events: https://github.com/ericdrowell/KineticJS/wiki/Change-Log — markE, Sep 24 '13 at 05:24

Detect if mouse is leaving browser window with button pressed

1 Answers1