Как изменить положение мыши?

Question

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

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

Не могли бы вы рассказать мне, как это сделать в javavscript?

Answer 1

На самом деле вы не можете перемещать указатель мыши с помощью javascript. Но если вы спросили о: how to change the position of the element, when the mouse cursor move to that area.Для этого см. Фрагмент кода ниже:

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>

Но не очень хорошая идея , чтобы предотвратить попадание курсора мыши в область элемента.Для этого лучше скрыть элемент при перемещении курсора мыши рядом с ним.Смотрите фрагмент кода ниже:

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>

И если вы примете вышеуказанное решение, вы можете просто сделать это, не используя javascript и только CSS.

#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>

Answer 2

К сожалению, в настоящее время это не функция JavaScript, как я обнаружил после небольшого исследования. Вот мой источник.

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