如何在javascript中实现“鼠标抵抗”？

我需要在javascript中实现鼠标抵抗.

作为我的意思的示例,请考虑一下Enligthenment窗口管理器如何处理屏幕边缘阻力以在不同的桌面之间切换,或者如果您不熟悉该功能：

想象其中有一个正方形的大矩形.
在正方形内单击鼠标[onmousedown]时,鼠标会使其自身移动到正方形的边界,然后进行一些固定操作直到达到阈值,然后在较大的矩形内四处移动.

理想情况下,鼠标光标应停留在正方形内,直到未达到该阈值为止,并且仅在达到该阈值时才离开该区域.

有什么想法或例子吗？
跨浏览器解决方案也受到极大的赞赏. (直到ie7,即)
谢谢！

解决方法:

如前所述,您无法使用Javascript设置鼠标位置.

但是,由于您问过如何在mousedown上实现此功能,因此我假设用户正在屏幕上拖动某些东西.因此,您可以让他们拖动的元素显示此行为.您需要两个元素作为区域,一个可以自由拖动目标,另一个可以定义边界的大小.我会用jQuery来缩短代码,但基本上您会遇到类似这样的事情. (未经测试的代码)

HTML：

<div class='borderLand'>
    <div class='freeZone'>
        <img class='draggable'>
    </div>
</div>

CSS：

.borderLand {position: relative; width: 110px; height: 110px;}
.freeZone {position: relative; top: 10px; left:10px; height: 100px; width: 100px;}

JS：

我无法从头顶写完整的代码,但是算法就像

onmousedown{
  check for click location
  if it's over the draggable (watch for bubbling) begin dragging, set dragging flag
}

onmouseup{
  clear dragging flag if it's set
}

borderland onm ouseover{
  if dragging, stop the movement of the draggable (watch for bubbling here too)
}

borderland onm ouseout{
  start dragging again (if they move back in or out it doesn't matter, you want to drag)
}

抱歉,如果您需要更多详细信息,但是用普通的JS进行操作会有点冗长,而且我不确定您需要多少帮助.

标签：javascript-events,javascript
来源： https://codeday.me/bug/20191209/2096919.html