пользовательский курсор вне окна браузера

Question

У меня есть элемент на моем сайте, который можно свободно изменять. Это делается 4 ручками по краям. При наведении на эти ручки и при изменении размера элемента я хочу показать соответствующие стрелки изменения размера.

В настоящее время я реализовал это поведение, установив стиль курсора css тела / корня для этих стрелок. Проблема в этом заключается в ограничении клиентской области окна браузера. Было бы визуально более непротиворечивым и менее запутанным, если бы стрелка курсора была видна везде, пока мышь удерживается нажатой.

Карты Google делают то же самое с помощью курсора руки при перемещении карты. Поэтому мой вопрос заключается в том, как добиться этого эффекта самостоятельно.

Мой текущий (соответствующий) источник:

function startObjectScaling(e){
    e.stopPropagation();
    e.preventDefault();
    document.documentElement.style.cursor = this.style.cursor;
    window.addEventListener("mouseup", stopObjectScaling, false);
}

function stopObjectScaling(e){
    e.stopPropagation();
    document.documentElement.style.cursor = '';
    window.removeEventListener("mouseup", stopObjectScaling);
}

[...]

var tg = document.getElementById("transformGadget");
var handle = tg.firstChild.nextSibling;
for(var i=0;i<4;i++){
    handle.addEventListener("mousedown", startObjectScaling, false);
    handle = handle.nextSibling;
}

Answer 1

Для этой цели в более современных браузерах реализована специальная функция. Имя setCapture () . Он перенаправляет все вводимые мышью объекты, к которым был вызван метод. Теперь достаточно простого определения css cursor для этого элемента для архивации желаемого эффекта. После отпускания мыши этот эффект прекращается (для безопасности наверняка). Его также можно остановить вручную, вызвав releaseCapture

пример:

<style type="text/css">
#testObj {
    /* this cursor will also stay outside the window.
       could be set by the script at the mousedown event as well */
    cursor: hand;
}
</style>

[...]

document.getElementById('testObj').onmousedown = function(e){

    // these 2 might be useful in this context as well
    //e.stopPropagation();
    //e.preventDefault();

    // here is the magic
    e.target.setCapture();
}

Answer 2

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

Вы полагаетесь на возможную причуду ОС для создания своего поведения. Это не то, что вы можете предположить, всегда будет верным. Однако, как только вы запускаете mousedown, курсор в этой точке обычно остается неизменным, независимо от того, куда вы перемещаете мышь, пока что-то еще (другое окно, которое вы можете навести курсор мыши на «рабочий стол», системное прерывание?) Не изменится курсор.

Другими словами, не полагайтесь на это поведение. Найдите что-то еще, что будет работать для вас. Если вы должны это сделать, пересмотрите свои бизнес-требования.