0

Olá, Estou a usar o evento do onContextMenu com e.preventDefault(), para criar um menu personalizado. O problema é que se for o comportamento "nativo" do browser,os eventos como Scroll e Zoom são desativos, e ao usar desta forma continuam ativos. Há alguma forma de os desativar?

Isto porque estou a usar uma div com a position: fixed, com um top e um left igual ao pageX e pageY do evento de clique. Ao fazer zoom, e scroll a div altera a posição.

Nota: estou a usar um ambiente reactjs.

1 Resposta 1

1

Você pode cancelar os eventos mousewheel e keydown ao abrir o menu:

document.addEventListener("mousewheel", noWheelZoom);
document.addEventListener("keydown", noWheelZoom);

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

Ao fechar o menu, remover os eventos:

document.removeEventListener("keydown", noWheelZoom);
document.removeEventListener("mousewheel", noWheelZoom);

Exemplo:

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

document.oncontextmenu = function(e){
   e.preventDefault();

   document.addEventListener("mousewheel", noWheelZoom);
   document.addEventListener("keydown", noWheelZoom);

   var posX = e.pageX;
   var posY = e.pageY;
   var win_scroll = window.pageYOffset || document.documentElement.scrollTop;

   var menu = document.getElementById("menu");
   menu.style.display = "block";
   menu.style.left = posX+"px";
   menu.style.top = (posY-win_scroll)+"px";
   
   menu.onclick = function(e){
      e.stopPropagation();
   }
}

document.onclick = function(e){
   menu.style.display = "none";
   document.removeEventListener("keydown", noWheelZoom);
   document.removeEventListener("mousewheel", noWheelZoom);
}
#menu{
   width: 100px;
   height: 100px;
   display: none;
   position: fixed;
   background: red;
}
<div style="height: 1000px;">
   <div id="menu"></div>
</div>

5
  • Está quase perfeita esta solução, apenas precisava de saber se existe um evento que detete o clique fora do browser, isto porque ao fazer o zoom manualmente funciona. Assim se fosse possivel detetar quando foi clicado fora da pagina, ocultava o menu. Existe algum evento para esse efeito? Obrigado 7/12/2018 às 16:33
  • O que existe é um evento quando o mouse sai da página.
    – Sam
    8/12/2018 às 18:08
  • E consegue dizer-me qual é esse evento? Muito obrigado 9/12/2018 às 23:14
  • Seria document.onmouseleave = function(){ }
    – Sam
    11/12/2018 às 0:30
  • Obrigado, funcionou na perfeição 11/12/2018 às 20:25

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .