禁用右键单击 pwa 中的图像

Question

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

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

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

Answer 1

您可以在任意元素上设置 oncontextmenu="return false;"。

检查此 link：https://codinhood.com/nano/dom/disable-context-menu-right-click-javascript

Answer 2

试试这个

您可以编写自定义挂钩来获取 window 大小

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;

然后，根据window size(width)再写一个自定义hook，可以注册事件监听器来避开context menu

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

禁用右键单击 pwa 中的图像

disabling right click on images in pwa

javascript

reactjs

progressive-web-apps