Question

我在canvas元素上使用了指针锁，画布全屏显示。我想检测右键点击和左键点击以响应它们。是否可以响应全屏和指针锁定中的点击？我已经知道如何使用指针锁api和全屏api，我不想要任何解释如何使用它们的答案。任何帮助将不胜感激。

Answer 1

根据我已经完成的实验，简短的答案是＆＃34;它取决于。＆＃34;看看下面的演示。画布按比例缩放为每个尺寸的屏幕尺寸的四分之一。将光标移到它上面时，画布上会出现一个白色圆圈。当您左键单击时，您将在画布上绘制一个红色圆圈，当您右键单击时，您将在画布上绘制一个青色圆圈。当您单击＆＃34;全屏＆＃34;按钮，您将激活指针锁定并进入全屏模式。如果按下＆＃34; Esc＆＃34;键，您将退出指针锁定和全屏模式。

请注意，您需要将代码复制并粘贴到文件中并加载它。如果您只需点击＆＃34;运行代码段，该演示就不会运行。＆＃34;

就你的问题而言，我有两个问题：

在Chrome中，即使在全屏/指针锁定时，也会触发右键和左键单击事件。但是，在Firefox中，只触发左键单击事件;我无法使用我尝试过的任何处理程序（click，mousedown，mouseup，contextmenu）获得右键单击事件。当不在全屏/指针锁定时，左右两个事件都会在两个浏览器中按预期触发。如果有人在全屏/指针锁定时有任何听取右键单击事件的解决方案，我很乐意听到它们。
似乎在Chrome / Firefox中的指针锁定中，事件不再向下指向包含在指针锁定元素中的元素，但它们继续冒泡到父元素。所以在演示时，canvas位于div内。 div具有指针锁定。 onclick，canvas和div附加document个处理程序，以报告控制台中的点击事件。如果没有指针锁定，单击画布会触发所有三个元素onclick，canvas和div）的document处理程序。但是，在div上使用指针锁定时，onclick的{{1}}处理程序永远不会被触发，尽管canvas和div的处理程序也会触发。

我还向Firefox发现了一些其他的怪癖，虽然与您的初始问题没有直接关系，但可能对有兴趣实施此类事情的人有所帮助：

当进入全屏模式时，Firefox会将样式应用于全屏元素以使其填满屏幕。当全屏放置时，我无法正确设置document样式（即占据全屏）。相反，我必须将canvas包裹在canvas中并在div上输入全屏。有关详细信息，请参阅Fullscreen API documentation on MDN：

如果您尝试在Gecko上模拟WebKit的行为，则需要将要呈现的元素放在另一个元素中，而您将使用全屏模式，并使用CSS规则调整内部元素以匹配您想要的外观。

在Firefox中，激活全屏模式停用指针锁定。为了激活两者，我必须首先激活全屏模式，然后激活指针锁定。但是简单的两行代码：
```
div
```
无效。我对正在发生的事情的理解是，在全屏模式完全建立之前，对requestPointerLock的调用已经启动。这导致指针锁定被激活，然后再次快速停用。我发现在调用canvasContainer.requestFullscreen(); canvasContainer.requestPointerLock();之前必须等到全屏模式完全建立。检查requestPointerLock()似乎足以检查全屏模式是否完全正常运行。以下单击处理程序定义可以解决此问题：
```
document.mozFullScreenElement !== null
```
此功能会反复检查是否已建立全屏模式。如果是，它会启动指针锁定。如果在2秒后无法确定全屏模式，则超时。

我还没有在IE中进行任何测试。

＆＃13;

document.getElementById('fullscreen_button').onclick = function(e) {
       // When button is clicked, enter both full screen and pointer lock
    canvasContainer.requestFullscreen();
    var timeout = 2000;
    var interval = window.setInterval(function() {
        if (document.mozFullScreenElement !== null) {
            window.clearInterval(interval);
            canvasContainer.requestPointerLock();
        } else if (timeout <= 0) {
            addErrorMessage('Unable to establish pointer lock.');
            clearTimeout(interval);
        } else {
            timeout -= 50;
        }
    }, 50);
}

＆＃13;

Answer 2

这对于我在指针锁定后处理rightClick很有用。

const onMouseDown = (evt) => {
  switch (evt.which) {
    case 1: return handleLeftClick();
    case 3: return handleRightClick();
  }
};

document.body.addEventListener('mousedown', onMouseDown, true);

DOM事件是否与指针锁一起使用？

2 个答案: