如何改变鼠标位置？

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?

Answer 1

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> 

Answer 2

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.