2

我在屏幕上显示了一组按钮。我正在尝试实现一个在将鼠标悬停在按钮上时执行的功能（具有类“按钮”）。

该函数需要将鼠标指针显示在按钮的中心，这意味着当实际的鼠标指针在按钮上时，鼠标指针显示在按钮的中心。我尝试使用RequestPointerLockAPI，但这隐藏了鼠标指针，而我希望它显示出来，我相信它只适用于事件处理程序onclick。

这是我到目前为止所做的：

var buttons = document.getElementsByClassName('button');
buttons.requestPointerLock = buttons.requestPointerLock || buttons.mozRequestPointerLock;
document.exitPointerLock = document.exitPointerLock || document.mozExitPointerLock;
document.addEventListener('pointerlockchange', lockChangeAlert, false);
document.addEventListener('mozpointerlockchange', lockChangeAlert, false);

function lockChangeAlert() 
{
    if (document.pointerLockElement === buttons || document.mozPointerLockElement === buttons) 
    {
        console.log('The pointer lock status is now locked');
        document.addEventListener("mousemove", updatePosition, false);
    } else 
    {
        console.log('The pointer lock status is now unlocked');  
        document.removeEventListener("mousemove", updatePosition, false);
    }
}

function updatePosition(e) 
{
}

buttons.onclick = function()
{
     buttons.requestPointerLock();
}

请对我如何实现这一点有任何想法？

4

2 回答 2

3

您无法使用 JavaScript 设置光标的位置。这违背了许多安全考虑。您可以做的最好的事情是隐藏光标（使用cursor: noneon :hover，并在按钮的中心绘制一个静态图像。

请注意，如果您选择走这条路，不同系统上光标图标的不一致将成为一个问题。

与其他一些 JavaScript API 一样，requestPointerLock它不适用于诸如mouseover(not different requestFullscreen) 之类的事件。他们需要直接的用户交互才能工作。诸如此类的事件mouseover太容易被利用。

Pointer Lock API示例使用画布在画布上绘制圆圈。

于 2016-11-25T07:35:45.050 回答
2

这可能会有所帮助。

button {
  background: #333;
  position: relative;
  color: #fff;
  padding: 40px 80px;
  border: none;
  font-size: 32px;
}
button:hover {
  cursor: none;
}
button:hover:after {
  content: '';
  background-image: url("http://www.freeiconspng.com/uploads/original-file---svg-file-nominally-550--400-pixels-file-size-3--23.png");
  width: 48px;
  height: 48px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-size: contain;
  background-repeat: no-repeat;
}
<button>Here</button>

这里也是codepen：http ://codepen.io/hunzaboy/pen/pNwOqZ

于 2016-11-25T08:02:29.917 回答