js中当按下鼠标右键光标移出浏览器后，如何获触发mousemove事件？

Question

使用场景：

做一个在线图形编辑器，需要左键绘图，右键拖拽。

右键选中一个对象后后拖出编辑器区域，编辑器的dom无法继续捕捉mousemove事件。

因为在浏览器中一般的dom即使是左键按下移动，箭头移出了该dom也无法捕捉mousemove事件。

于是我使用iframe代替普通的dom，然后把事件绑在iframe里面的window上。

iframe.contentWindow.addEventListener(
    'mousemove', 
    e=>console.log(e)
);

在鼠标左键按下后光标移出iframe区域，mousemove事件任然可以被触发。

但是这种情况下鼠标右键与鼠标滚轮键按下，然后箭头移出iframe后mousemove均不被触发。

请问怎么可以使得右键按下后光标移出iframe区域任然可以触发mousemove事件，从而实现可以将一个绘图的对象拖出浏览器可视范围。

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

要解决这个问题，你可以尝试以下几种方法来处理右键按下时的事件绑定：

1. 使用 window 对象作为事件源：

   window.addEventListener('mousedown', (event) => {
       if(event.button === 2) { // 如果是右键按下
           event.preventDefault();
           console.log("Right button pressed");
       }
   });
   

   这个方法的优点是它可以在所有类型的按钮（包括右键）下都工作，并且不需要额外的操作。

2. 在 document 对象上添加一个事件监听器：

   document.addEventListener('mousedown', (event) => {
       if(event.button === 2) { // 如果是右键按下
           event.preventDefault();
           console.log("Right button pressed");
       }
   });
   

3. 在 body 或者其他元素上添加一个事件监听器：

   body.addEventListener('mousedown', (event) => {
       if(event.button === 2) { // 如果是右键按下
           event.preventDefault();
           console.log("Right button pressed");
       }
   });
   

   这种方法适用于没有直接获取到 window 对象的情况。

4. 使用 jQuery 或其他的前端库：

   $(document).on('mousedown', function() {
       if($(this).is('.right-button')) {
           $(this).off('mousemove');
           $(this).off('mouseup').off('mouseleave');
           console.log("Right button pressed");
       }
   });
   

以上四种方法都可以让你在右键按下时捕获mousemove事件。请注意，这只是一个示例，实际应用中可能需要根据具体情况进行调整。