javascript - Custom cursor outside of browser window - Stack Overflow

admin管理员组

文章数量:1026989

I have a element on my website which is freely resizable. This is done by 4 handles on the edges. On hovering these handles and while resizing the element I want to show the respective resize arrows.

Currently I implemented this behavior by setting the css cursor style of the body/root to these arrows. The problem about it is the limit to the client area of the browser window. It would be visually more consistent and less confusing, if the arrow cursor would be visible everywhere while the mouse is hold down.

Google Maps is doing the same thing with their hand cursor while moving the map. So my question is how to achive this effect on my own.

My current (relevant) source:

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

I have a element on my website which is freely resizable. This is done by 4 handles on the edges. On hovering these handles and while resizing the element I want to show the respective resize arrows.

Currently I implemented this behavior by setting the css cursor style of the body/root to these arrows. The problem about it is the limit to the client area of the browser window. It would be visually more consistent and less confusing, if the arrow cursor would be visible everywhere while the mouse is hold down.

Google Maps is doing the same thing with their hand cursor while moving the map. So my question is how to achive this effect on my own.

My current (relevant) source:

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

• javascript
• window
• mouse-cursor

Share Improve this question Follow edited Dec 29, 2021 at 13:18 General Grievance 5,0433838 gold badges3737 silver badges5656 bronze badges asked Nov 1, 2010 at 23:13 V02460V02460 65277 silver badges1313 bronze badges 6

• 2 For me on Chromium, the Google Maps cursor only stays a hand if I go out of the window without going over any other part of the page; otherwise, it reverts to the normal cursor. I think this means that you probably can't get a 100% solution to your problem, unfortunately. – Tikhon Jelvis Commented Nov 1, 2010 at 23:25
• I tested it in Firefox and Chrome and there it worked just fine - it's so or so better than my current solution. – V02460 Commented Nov 2, 2010 at 0:20
• You're asking to control something beyond the scope of your control - there's no way this is a reasonable thing to ask, let alone try and reliably achieve. – annakata Commented Nov 3, 2010 at 16:34
• Isn't it reasonable in the restricted case of dragging? (exact: mouse down in client area and moving out while holding down the mouse button) And wouldn't it be smart to implement it in browsers (I think they did already...)? – V02460 Commented Nov 11, 2010 at 9:53
• You've got two responses telling you it won't work, and one telling you it doesn't, and you're still trying to tell us we're wrong? Interesting... – jcolebrand Commented Nov 11, 2010 at 13:06

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 5

There is a special function implemented in the more modern browsers for this purpose. The name is setCapture(). It redirects all mouse input to the object the method was called on. Now a simple css cursor definition on that element is enough to archive the desired effect. After mouse release this effect stops (for security for sure). It can also be stopped manually by calling releaseCapture

example:

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

if the arrow cursor would be visible everywhere while the mouse is hold down.

You're relying on a potential OS quirk to create your behavior. This is not something you can ASSUME will always hold true. However, once you start a mousedown, the cursor at that point will normally stay the same, no matter where you move the mouse to, UNTIL something else (another window that you may mouse over? the desktop? a system-interrupt?) changes the cursor.

In other words, don't rely on this behavior. Find something else that will work for you. If you must do this, re-examine your business requirements.

I have a element on my website which is freely resizable. This is done by 4 handles on the edges. On hovering these handles and while resizing the element I want to show the respective resize arrows.

Currently I implemented this behavior by setting the css cursor style of the body/root to these arrows. The problem about it is the limit to the client area of the browser window. It would be visually more consistent and less confusing, if the arrow cursor would be visible everywhere while the mouse is hold down.

Google Maps is doing the same thing with their hand cursor while moving the map. So my question is how to achive this effect on my own.

My current (relevant) source:

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

I have a element on my website which is freely resizable. This is done by 4 handles on the edges. On hovering these handles and while resizing the element I want to show the respective resize arrows.

Currently I implemented this behavior by setting the css cursor style of the body/root to these arrows. The problem about it is the limit to the client area of the browser window. It would be visually more consistent and less confusing, if the arrow cursor would be visible everywhere while the mouse is hold down.

Google Maps is doing the same thing with their hand cursor while moving the map. So my question is how to achive this effect on my own.

My current (relevant) source:

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

• javascript
• window
• mouse-cursor

Share Improve this question Follow edited Dec 29, 2021 at 13:18 General Grievance 5,0433838 gold badges3737 silver badges5656 bronze badges asked Nov 1, 2010 at 23:13 V02460V02460 65277 silver badges1313 bronze badges 6

• 2 For me on Chromium, the Google Maps cursor only stays a hand if I go out of the window without going over any other part of the page; otherwise, it reverts to the normal cursor. I think this means that you probably can't get a 100% solution to your problem, unfortunately. – Tikhon Jelvis Commented Nov 1, 2010 at 23:25
• I tested it in Firefox and Chrome and there it worked just fine - it's so or so better than my current solution. – V02460 Commented Nov 2, 2010 at 0:20
• You're asking to control something beyond the scope of your control - there's no way this is a reasonable thing to ask, let alone try and reliably achieve. – annakata Commented Nov 3, 2010 at 16:34
• Isn't it reasonable in the restricted case of dragging? (exact: mouse down in client area and moving out while holding down the mouse button) And wouldn't it be smart to implement it in browsers (I think they did already...)? – V02460 Commented Nov 11, 2010 at 9:53
• You've got two responses telling you it won't work, and one telling you it doesn't, and you're still trying to tell us we're wrong? Interesting... – jcolebrand Commented Nov 11, 2010 at 13:06

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 5

There is a special function implemented in the more modern browsers for this purpose. The name is setCapture(). It redirects all mouse input to the object the method was called on. Now a simple css cursor definition on that element is enough to archive the desired effect. After mouse release this effect stops (for security for sure). It can also be stopped manually by calling releaseCapture

example:

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

if the arrow cursor would be visible everywhere while the mouse is hold down.

You're relying on a potential OS quirk to create your behavior. This is not something you can ASSUME will always hold true. However, once you start a mousedown, the cursor at that point will normally stay the same, no matter where you move the mouse to, UNTIL something else (another window that you may mouse over? the desktop? a system-interrupt?) changes the cursor.

In other words, don't rely on this behavior. Find something else that will work for you. If you must do this, re-examine your business requirements.

本文标签： javascriptCustom cursor outside of browser windowStack Overflow