Quando um usuário clica com o botão direito em uma página web, o navegador dispara o evento contextmenu. Para impedir o menu padrão do sistema, podemos interceptar esse evento usando event.preventDefault(). Isso deve ser feito durante a fase de captura ou alvo do fluxo de eventos DOM para garantir eficácia.

Técnica 1: Interceptação com JavaScript puro

Uma abordagem direta é usar addEventListener no elemento desejado. No entanto, para spuortar conteúdo dinâmico, recomenda-se delegação de eventos no documento. Abaixo, um exemplo que marca imagens com um atributo personalizado.

// Seleciona imagens com o atributo data-block-contextmenu
const protectImages = () => {
  document.addEventListener('contextmenu', (evt) => {
    const target = evt.target.closest('[data-block-contextmenu]');
    if (target) {
      evt.preventDefault();
      alert('Ação não permitida: imagem protegida.');
    }
  }, { passive: false });
};
// Inicializa após o carregamento do DOM
document.addEventListener('DOMContentLoaded', protectImages);

HTML correspondente:

<img data-block-contextmenu src="imagem-hd.jpg" alt="Conteúdo protegido">

Técnica 2: Implementação em React com hooks

Em aplicações React, é crucial limpar event listeners para evitar vazamentos de memória. O exemplo abaixo usa useEffect para gerenciar o ciclo de vida do evento.

import React, { useEffect } from 'react';

const ProtectedImage = ({ source }) => {
  useEffect(() => {
    const handleContextMenu = (e) => {
      if (e.target.closest('[data-block]')) {
        e.preventDefault();
        console.log('Menu de contexto bloqueado.');
      }
    };
    document.addEventListener('contextmenu', handleContextMenu, { passive: false });
    return () => {
      document.removeEventListener('contextmenu', handleContextMenu);
    };
  }, []);

  return (
    <img data-block src={source} style={{ maxWidth: '100%' }} alt="Protegido" />
  );
};

Nota: Em aplicativos com server-side rendering (Next.js), certifique-se de que o código só execute no cliente.

Técnica 3: Diretiva personalizada no Vue 3

No Vue 3, pode-se criar uma diretiva para adicionar o atributo de bloqueio, combinada com delegação de eventos global no componente raiz.

// Definindo diretiva v-no-context
const vNoContext = {
  mounted(el) {
    el.setAttribute('data-block', '');
  }
};

// No componente App.vue, adicionar evento global
<script setup>
import { onMounted, onUnmounted } from 'vue';

let handler;
onMounted(() => {
  handler = (e) => {
    if (e.target.closest('[data-block]')) {
      e.preventDefault();
    }
  };
  document.addEventListener('contextmenu', handler, { passive: false });
});

onUnmounted(() => {
  if (handler) {
    document.removeEventListener('contextmenu', handler);
  }
});
</script>

// Uso em template
<template>
  <img v-no-context :src="imageSrc" />
</template>

Considerações e alternativas

Bloquear o menu de contexto não impede capturas de tela ou inspeção via ferramentas de desenvolevdor. Em casos onde a proteção é essencial (ex.: sistemas de exame online), combine técnicas como:

• Desabilitar seleção de texto com CSS: user-select: none;
• Usar imagens como backgrounds CSS para evitar arrastar.
• Implementar marcas d'água dinâmicas via Canvas.

Para melhorar a experiência do usuário, considere menus de contexto personalizados que ofereçam opções como "Ver com marca d'água" ou "Denunciar uso indevido".

Soluçãoção de problemas comuns

Ao implementar bloqueio de menu de contexto, evite estes erros:

• Não usar preventDefault() em ouvintes adicionados com addEventListener; return false não funciona nesse caso.
• Garantir que eventos em conteúdo dinâmico sejam tratados via delegação no documento ou elemento pai estático.
• Em ambientes com SSR, envolver código de evento em verificações de cliente (ex.: if (typeof window !== 'undefined')).
• Para suporte a dispositivos móveis, monitorar eventos de toque como touchstart para simular detecção de toque longo.

Código auxiliar: Marca d'água com Canvas

Para adicionar marcas d'água a imagens dinamicamente, use a API Canvas:

function applyWatermark(canvas, text) {
  const ctx = canvas.getContext('2d');
  ctx.font = 'italic 16px Arial';
  ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
  ctx.translate(50, 50);
  ctx.rotate(-0.3);
  ctx.fillText(text, 0, 0);
}