如何更改鼠标位置？

Question

我想让鼠标无法进入某些区域。因此，当我将鼠标光标移动到该区域时，其位置会以编程方式更改。

我的意思是我想制作一些用户无法将鼠标移动到的区域。

你能告诉我如何在javavscript中做到这一点吗？

Answer 1

实际上你不能用javascript移动鼠标指针。但是如果你问到：how to change the position of the element, when the mouse cursor move to that area。为此，请参阅下面的代码段：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但 不是一个好主意，以防止鼠标光标进入元素区域。要做到这一点，最好在将鼠标光标移动到它附近时隐藏元素。请参阅下面的代码段：

＆＃13;

＆＃13;

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'
} )

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果您接受上述解决方案，则只需执行此操作即可，而无需使用javascript并仅使用CSS。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

不幸的是，这不是我在经过一些研究后发现的JavaScript功能。 Here is my source.

这肯定会引起隐私问题，因为用户可能不想争取控制鼠标。