Как поймать событие mouse-up вне элемента?

У меня есть простой Javascript-код, похожий на этот:

var mouseIsDown = false;
...
function canvasMouseDown(e) {
  ...
  mouseIsDown = true;
}
function canvasMouseUp(e) {
  mouseIsDown = false;
}
function canvasMouseMove(e) {
  if (mouseIsDown) {
    ...
  }
}

с реализацией моего собственного пользовательского интерфейса для преобразований (трансляции, масштабирование и вращения) с холстом.

Такая реализация в canvasMouseMove() проверяет функцию mouseIsDown. Все работает отлично, если пользователь не отпускает кнопку мыши, когда курсор/указатель находится за пределами элемента холста. Если это произойдет, переменная mouseIsDown останется true и не отключена функцией canvasMouseUp.

Что такое легкое исправление или решение в чистом JavaScript (без jQuery) для этой проблемы?

Ответы

Ответ 1

Если вы хотите перехватить событие mouseup где-нибудь еще в документе, вы можете добавить обработчик события для этого в элемент documentelement. Обратите внимание, что это не будет реагировать на события mouseup вне области просмотра, поэтому вы можете захотеть запустить также, когда мышь снова войдет в область просмотра без нажатой кнопки.

Если вы хотите поймать мышь, покидающую элемент canvas, это немного сложнее. В то время как IE знает mouseleave событие, стандарт DOM имеет mouseout событие, которое также пожары, когда потомок вашего элемента слева (хотя холст, как правило, не имеет дочерних элементов). Подробнее об этом на quirksmode.org.

Я создал скрипку, чтобы продемонстрировать поведение (работает только с W3 DOM). Вы можете попытаться изменить documentelement на body. В Opera, то mouseup слушатель на <html> событии обнаруживает mouseup события за пределами документа, когда "перетащить" начал внутри него - я не знаю, что ли стандартное поведение.

Ответ 2

document.onmouseup будет выбрасываться даже за пределы области просмотра, что хорошо известно, что вы получаете только привязку к объекту документа. test здесь: http://jsfiddle.net/G5Xr2/

$(document).mouseup(function(e){
  alert("UP" + e.pageX);
});

Он даже получит положение мыши!

Ответ 3

Добавьте обработчик события более высокого уровня (возможно, в тело), который ловит событие mouseUp и устанавливает mouseIsDown в false.

Вот демо: http://jsfiddle.net/ZFefV/

Ответ 4

window.addEventListener('mouseup', function(event){
// do logic here
})

Он обрабатывает выведение мыши даже за пределы браузера

Ответ 5

Я создал переменную, которая сохранила строку id целевого элемента после mousedown. В событии mouseup я проверяю строку, чтобы увидеть, является ли она нулевой. Если это не так, я использую строку для получения элемента и выполняю все, что захочу, в блоке кода, а затем reset переменную до нуля.

Иными словами, шаги:

1.) введите переменную, установите ее в значение null. 2.) на "mousedown", сохраните строку id или class в переменной. 3.) на "mouseup", проверьте переменную (для безопасности). Если это не пусто. затем используйте строку, чтобы захватить элемент и использовать его для чего-то. 4.) Затем reset переменная в null.

var thisTarget = null

// when I know they click in the right place, save the target. 
// you may not need parent(). I was using a UI slider and needed it.

$(".section").mousedown( function(e) {
    thisTarget = $(e.target.parent().attr('id');
    console.log(thisTarget);
});

// anywhere on the page... 
$(document).mouseup( function(e) { 
    // because I'll make it null after every mouseup event.
    if (thisTarget !== null) { 
        console.log( $("#" + thisTarget) ); // returns element
        // do something with it
        thisTarget = null;
    }
});

Ответ 6

В JavaScript это будет следующим:

myElement.addEventListener('mousedown', () => {
  const handleMouseUp = (event) => {
    // check whether outside the element with event.target and myElement

    document.removeEventListener('mouseup', handleMouseUp);
  };

  document.addEventListener('mouseup', handleMouseUp);
})