javascript - 防止像figma那样放大网页，

Question

我正在开发一个拖放应用程序，我需要防止用户放大和缩小网页，例如

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

也尝试过

 document.addEventListener("wheel", zoomShortcut); //add the event

  function zoomShortcut(e) {
    console.log(e);

    e.preventDefault(); //prevent zoom


  }

它们都不起作用。

Answer 1

所以我的问题主要是针对 mac 用户的，所以我必须打开一些文档并阅读有关事件 gesturestart 的内容，我认为这主要是关于 mac 书籍的，所以我对我的代码并添加了这个监听器

  document.addEventListener("gesturestart", e => {
    e.preventDefault();
    doStuff(e);
  });

还添加了

  document.addEventListener('wheel', function(e) {
    e.preventDefault();
    doStuff(e);
  });

并运行了适用于 safari 的代码，但是当我在 chrome 上运行时出现错误

Unable to preventDefault inside passive event listener invocation.

经过一些研究后，我发现了一些关于在事件监听器中设置被动选项的信息，因此我的代码变得

 document.addEventListener('wheel', function(e) {
    e.preventDefault();
    doStuff(e);
  },{passive:false});

这解决了我的问题，我能够防止 Figma 等用户在整个网页上进行捏缩放