Блог

Главная - Вопросы по программированию - отключение щелчка правой кнопкой мыши по изображениям в pwa

отключение щелчка правой кнопкой мыши по изображениям в pwa

#javascript #reactjs #progressive-web-apps

Вопрос:

Я разрабатываю приложение pwa react. когда я долго нажимаю на изображение, оно ведет себя так, как будто происходит щелчок правой кнопкой мыши. я хочу отключить это поведение только в автономном режиме. я знаю, что могу использовать

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

но этот прослушиватель применяется ко всему окну. использование ссылки может быть не очень хорошим подходом, потому что я хочу, чтобы пользователь мог щелкнуть правой кнопкой мыши в режиме рабочего стола.

Ответ №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 amp;amp; windowSize.width < 600) {
      setListenerStatus(true);
      ref.current.addEventListener("contextmenu", avoidContextMenu);
    } else if (listenerStatus amp;amp; 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

Метки: