0

Gostaria que esse menu Dropdown não fechasse ao clicar com o botão direito do mouse dentro dele para abrir um link em uma nova aba.

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
} 
 /* Dropdown Button */
.dropbtn {
    background-color: #3498DB;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    background-color: #2980B9;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;} 
 <div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div> 

4
  • Remova o código de window.onclick Commented 25/01/2018 às 20:03
  • Clique esquerdo ou direito?
    – Sam
    Commented 25/01/2018 às 20:03
  • @dvd é o direito, eu me confundi aqui, o que abre as opções do Browser, "Abrir em uma nova aba" etc... Commented 25/01/2018 às 20:12
  • Por favor, altera na pergunta senão a pergunta fica sem sentido.
    – Sam
    Commented 25/01/2018 às 20:13

1 Resposta 1

1

Pelo que vi, isso só acontece no Firefox Quantum 57, que captura um clique direito do mouse no evento onclick, embora não faça ação no elemento (como se fosse um clique esquerdo).

Para resolver isso, você pode adicionar outro event handler no submenu com oncontextmenu, que detecta o clique direito do mouse. Neste caso você pode adicionar a classe .show ao elemento. Isso fará que ele não se feche mesmo clicando com o botão direito.

Como dito no início, deve ser testado no FF Quantum 57. Nos demais navegadores não existe esse problema:

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
      document.querySelector(".dropdown-content").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}   

var drop = document.querySelector(".dropdown-content");
drop.oncontextmenu = function(event) {
   drop.classList.add("show");
}
/* Dropdown Button */
.dropbtn {
    background-color: #3498DB;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    background-color: #2980B9;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

10
  • Perfeito. É exatamente isso. Obrigado. Commented 25/01/2018 às 20:23
  • pretendo usar 2 ou até 3 desses dropdowns numa mesma página, eu tentei aqui, mas existe conflitos. Como eu devera prosseguir? Eu queria algo semelhante a esses menus dropdowns com icones do StackOverflow. É claro que tentei furta-los, mas sem sucesso.. rsrs Commented 25/01/2018 às 22:43
  • @JohnQuimera Veja que o menu tem um id="myDropdown"... se vc duplicar vai dar conflito porque o script não sabe diferenciar um id do outro, ele sempre vai pegar o primeiro que encontrar... teria que adaptar o código e trocando id por class.. quanto aos ícones, tem um plugin que já vem com vários ícones, acho que é o font-awesome
    – Sam
    Commented 25/01/2018 às 23:16
  • eu já troquei todos os document.getElementById() por document.querySelector() e agora só estou usando classes, está funcionando do mesmo jeito, mas não funciona dois na mesma página. Commented 25/01/2018 às 23:21
  • @JohnQuimera Tem que fazer querySelectorAll para selecionar todos e depois fazer um loop
    – Sam
    Commented 25/01/2018 às 23:23

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 .