在 pwa 中禁用右键单击图像答案

【问题标题】：disabling right click on images in pwa在 pwa 中禁用右键单击图像
【发布时间】：2021-10-16 06:25:19
【问题描述】：

我正在开发一个 pwa react 应用程序。当我长按单击图像时，它的行为就像发生右键单击一样。我只想在独立模式下禁用此行为。我知道我可以使用

window.addEventListener('contextMenu',(e)=>e.preventDefault())

但此侦听器适用于整个窗口。使用 ref 可能不是一个好方法，因为我希望用户能够在桌面模式下进行右键单击。

【问题讨论】：

标签： javascript reactjs progressive-web-apps

【解决方案1】：

你可以在任何你想要的元素上设置oncontextmenu="return false;"。

查看此链接：https://codinhood.com/nano/dom/disable-context-menu-right-click-javascript

【讨论】：

【解决方案2】：

试试这个

你可以编写一个自定义钩子来获取窗口大小

import { useState, useEffect } from "react";

const useWindowSize = () => {
  const [windowSize, setWindowSize] = useState({
    width: undefined,
    height: undefined
  });

  useEffect(() => {
    if (typeof window !== "undefined") {
      function handleResize() {
        setWindowSize({
          width: window.innerWidth,
          height: window.innerHeight
        });
      }

      window.addEventListener("resize", handleResize);

      handleResize();

      return () => window.removeEventListener("resize", handleResize);
    }
  }, []);
  return windowSize;
};

export default useWindowSize;

然后，根据窗口大小（宽度）编写另一个自定义钩子，您可以注册事件侦听器以避免上下文菜单

import { useState, useEffect } from "react";
import useWindowSize from "./useWindowSize";

function avoidContextMenu(e) {
  e.preventDefault();
}

const useAvoidContextMenu = (ref) => {
  const windowSize = useWindowSize();
  const [listenerStatus, setListenerStatus] = useState(false);

  useEffect(() => {
    if (!listenerStatus && windowSize.width < 600) {
      setListenerStatus(true);
      ref.current.addEventListener("contextmenu", avoidContextMenu);
    } else if (listenerStatus && windowSize.width >= 600) {
      setListenerStatus(false);
      ref.current.removeEventListener("contextmenu", avoidContextMenu);
    }
  }, [windowSize.width]);

  useEffect(() => {
    return ref.current.removeEventListener("contextmenu", avoidContextMenu);
  }, []);
};

export default useAvoidContextMenu;

在您的组件中调用useAvoidContextMenu，为该组件提供一个引用。这样它是可配置和可重用的。

import { createRef } from "react";
import useAvoidContextMenu from "./useAvoidContextMenu";

export default function App() {
  const myRef = createRef();
  useAvoidContextMenu(myRef);

  return (
    <div style={{ backgroundColor: "lightblue" }}>
      <div className="App" ref={myRef}>
        <h1>Right click on me and check in different window widths</h1>
        <h3>(less than 600px and greater than 600px)</h3>
      </div>
    </div>
  );
}

代码沙盒 => https://codesandbox.io/s/inspiring-hellman-fomfw?file=/src/App.js

【讨论】：