Обнаружить, если мышь покидает окно браузера с нажатой кнопкой

Я использую Kinetic.js для некоторого перетаскивания в моем холсте, и я пытаюсь определить, покидает ли мышь окно браузера. Единственное отличие состоит в том, что я также хочу, чтобы он срабатывал при нажатии кнопки мыши во время перемещения.Обнаружить, если мышь покидает окно браузера с нажатой кнопкой

Этот поток в значительной степени решает вопрос, но если нажать на левую кнопку мыши при перемещении из него не работает: Link

Для меня, кажется, что событие MouseOut игнорируется, пока левой кнопкой мыши нажата кнопка. Я сделал тест here. Есть идеи?

источник

2013-09-22 codepushr

На MouseMove, вероятно, также на событии перетаскивания вы можете проверить значение «x» и «y» позиции мыши, если оно находится внутри или снаружи окна. Для 'top' и' left' оно должно быть '> 0' для' bottom' и 'right' вам нужны' height' и 'width' окна просмотра. –

Вы можете установить флаг isDown при нажатии мыши. Затем очистите флаг isDown при отпускании мыши. И след MouseOut + флаг isDown, чтобы увидеть, если пользователь покидает с помощью мыши нажимается

Вот версия JQuery:

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; 
});

Вот код и 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>

источник

2013-09-22 21:00:51 markE

Я попробовал это и для меня кажется, что прослушиватель событий mouseout не работает для выхода из окна, пока нажаты кнопки – codepushr

У меня был сбой с моим исходным кодом ... Я исправил и вот скрипка: http: //jsfiddle.net/m1erickson/ZjKGS/ – markE

, поэтому трюк заключался в том, чтобы работать с необработанной сценой div, а не с кинетическим объектом? – codepushr

Обнаружить, если мышь покидает окно браузера с нажатой кнопкой

ответ

Смежные вопросы