How to change the mouse position?

Question

I want to make the mouse cannot enter some areas. So when I move the mouse cursor to that area, its positions is changed programmatically.

What I mean is I want to make some areas that the user cannot move the mouse in to.

Would u tell me how to do it in javavscript?

Honestly, I think this idea is a very bad in UX. Maybe you want to change the mouse cursor to something else to indicate the blocked area instead — Tree Nguyen, Jun 11 '18 at 04:19
moving the actual mouse is not possible, but if you wanted to spend some time you could create the illusion it isn't moving by hiding the mouse via CSS and using a custom sprite or image in its place. This has the potential to be very tedious. — lemieuxster, Jun 11 '18 at 04:19
Possible duplicate of [Move the mouse pointer to a specific position?](https://stackoverflow.com/questions/4752501/move-the-mouse-pointer-to-a-specific-position) — Bdloul, Jun 11 '18 at 04:19
what you can do though, is use css to handle hover your div and change the cursor properties to cursor: not-allowed — Bdloul, Jun 11 '18 at 04:23
@lemieuxster "_moving __the actual mouse__ is not possible_", but hiding the actual mouse is ..? = ). — Teemu, Jun 11 '18 at 04:29
@Teemu https://stackoverflow.com/questions/1071356/is-it-possible-to-hide-the-cursor-in-a-webpage-using-css-or-javascript — lemieuxster, Jun 11 '18 at 04:32
@Teemu then you could create a fake pointer with javascript and an image and have it go or not go wherever you please. It wouldn't be perfect, but that is as close as you'll get. — lemieuxster, Jun 11 '18 at 04:33
@lemieuxster "_the actual mouse_" is the thing at your hand, not the cursor = ). — Teemu, Jun 11 '18 at 04:33

Kavian K. · Answer 1 · 2018-06-11T10:27:35.560

Actually You cannot move the mouse pointer with javascript.But if you asked about: how to change the position of the element, when the mouse cursor move to that area. For do this, see the code snippet below:

var elm = document.getElementById( 'area' ), /* get the element */
    rct = elm.getBoundingClientRect(),       /* return size of element */
    elW = rct.width,                         /* return element width */
    elH = rct.height,                        /* return element height */
    mrg = 50;                                /* element margin */

document.addEventListener( 'mousemove', function( e ) {
    var vpW = Math.max( document.documentElement.clientWidth, window.innerWidth || 0 ),   /* return Viewport width */
        vpH = Math.max( document.documentElement.clientHeight, window.innerHeight || 0 ), /* return Viewport height */
        rec = elm.getBoundingClientRect(),   /* return size of element */
        elL = rec.left,                      /* return element left position */
        elT = rec.top,                       /* return element top position */
        mLp = e.pageX,                       /* return mouse left position */
        mTp = e.pageY,                       /* return mouse top position */
        eLp,                                 /* Save new left position */
        eTp;                                 /* Save new top position */

    if ( mLp > elL - mrg && mLp < elL && mTp > elT - mrg && mTp < elT + elH + mrg ) {
        eLp = mLp + mrg;
        if ( mLp + mrg + elW > vpW ) eLp = mLp - mrg - elW
    }
    if ( mLp > elL && mLp < elL + elW + mrg && mTp > elT - mrg && mTp < elT + elH + mrg ) {
        eLp = mLp - mrg - elW;
        if ( mLp - mrg - elW < 0 ) eLp = mLp + mrg
    }
    if ( mTp > elT - mrg && mTp < elT && mLp > elL - mrg && mLp < elL + elW + mrg ) {
        eTp = mTp + mrg;
        if ( mTp + mrg + elH > vpH ) eTp = mTp - mrg - elH
    }
    if ( mTp > elT && mTp < elT + elH + mrg && mLp > elL - mrg && mLp < elL + elW + mrg ) {
        eTp = mTp - mrg - elH;
        if ( mTp - mrg - elH < 0 ) eTp = mTp + mrg
    }

    elm.style.left = eLp + 'px';
    elm.style.top = eTp + 'px';
} )

#area {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 50%;
    top: 50%;
    border: 3px solid #888;
    background-color: #aaa
}
#area:hover {
    background-color: red
}

<div id="area"></div>

But it's not a good idea to prevent mouse cursor from getting into the element area. To do this, it's better to hide the element as you move the mouse cursor to near it. See the code snippet below:

var elm = document.getElementById( 'area' ),
    rct = elm.getBoundingClientRect(),
    elW = rct.width,
    elH = rct.height,
    elL = rct.left,
    elT = rct.top,
    mrg = 30;

document.addEventListener( 'mousemove', function( e ) {
    var mLp = e.pageX,
        mTp = e.pageY;

    if ( mLp > elL - mrg && mLp < elL + elW + mrg && mTp > elT - mrg && mTp < elT + elH + mrg )
        elm.style.display = 'none'
    else
        elm.style.display = 'block'
} )

#area {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 50%;
    top: 50%;
    border: 3px solid #999;
    background-color: #aaa
}
#area:hover {
    background-color: red
}

<div id="area"></div>

And if you accept the above solution, you can simply do this without using javascript and using CSS only.

#parent {
    position: absolute;
    padding: 1px;
    left: 30%;
    top: 30%
}
#parent:hover > div#area {
    opacity: 0;
    cursor: none
}
#area {
    cursor: default;
    opacity: 1;
    width: 50px;
    height: 50px;
    border: 3px solid #999;
    background-color: #aaa
}

<div id="parent">
    <div id="area"></div>
</div>

score -1 · Answer 2 · answered Jun 11 '18 at 04:21

-1

Unfortunately, this is not currently a JavaScript feature as I found after a little research. Here is my source.

This would definitely raise privacy concerns, as a user may not want to fight for control over their mouse.

answered Jun 11 '18 at 04:21

Ben Soyka

816
10
25

How to change the mouse position?

2 Answers2