mui.js禁止长按复制

.no-copy {
  user-select: none; /* 禁止文本选择 */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
}

<div class="no-copy">
  这段内容不能被复制。
</div>

document.addEventListener('DOMContentLoaded', function() {
  const elements = document.querySelectorAll('.no-copy');

  elements.forEach(function(el) {
    // 阻止右键菜单
    el.addEventListener('contextmenu', function(e) {
      e.preventDefault();
    });

    // 阻止触摸事件触发长按
    el.addEventListener('touchstart', function(e) {
      if (e.touches.length > 1) {
        e.preventDefault();
      }
    }, { passive: false });

    // 阻止长按弹出菜单
    el.addEventListener('longpress', function(e) {
      e.preventDefault();
    });

    // 阻止选中
    el.style.userSelect = 'none';
    el.style.webkitUserSelect = 'none';
    el.style.msUserSelect = 'none';
  });
});

import React from 'react';
import { Typography } from '@mui/material';

const NoCopyText = () => {
  const handleTouchStart = (e) => {
    e.preventDefault();
  };

  const handleContextMenu = (e) => {
    e.preventDefault();
  };

  return (
    <Typography
      variant="body1"
      onTouchStart={handleTouchStart}
      onContextMenu={handleContextMenu}
      style={{ userSelect: 'none' }}
    >
      这段内容不能被复制。
    </Typography>
  );
};

export default NoCopyText;