Acione o comportamento do navegador nativo para (meio) clique em um link

Questão

Eu quero triggersr um clique do mouse (meio) em um link, de uma forma que aciona o comportamento do navegador nativo para este evento.

Por exemplo, nesses navegadores com os quais eu trabalho, o clique do meio faz com que a página vinculada seja aberta em uma nova guia em segundo plano.

Mas se outros navegadores tiverem um comportamento diferente, isso deve ser acionado.

Eu sei que existe o element.click(); método, mas como posso dizer qual botão do mouse deve ser clicado?

fundo

O pano de fundo é que eu quero fazer um div se comportar o máximo possível como um link comum. A ideia era criar uma tag de link oculto e acionar o comportamento do navegador nativo.

Requisitos para o div-como-um-link:

  • href pode vir de um atributo data-href.
  • Comportamento nativo do navegador para clicar com o botão esquerdo do mouse, clique do meio e, possivelmente, clique com o botão direito do mouse.
  • respeito ao atributo de destino, que poderia vir de um atributo de destino de dados.
  • tabindex
  • ativação com o teclado?
  • possibilidade de selecionar trechos de texto dentro do div. Isso significa que não podemos simplesmente usar uma sobreposição.

Por que não usar uma tag de link nativa? Porque o div contém tags internas. Portanto, tornar a checkbox div uma tag a causaria tags aninhadas, o que faria com que alguns navegadores reestruturassem a tree DOM.

Obviamente, eu poderia apenas definir document.location.href no clique. Mas isso é apenas 20% do comportamento nativo do navegador.

Eu também poderia tentar detectar o botão do mouse e usar js para abrir a guia em segundo plano, se fosse o botão do meio.

Mas talvez alguns navegadores tenham um comportamento diferente para o clique do meio. Eu preferiria deixar o navegador fazer a sua parte, do que tentar replicar um comportamento específico do navegador com js.

A ideia que tive foi criar uma tag oculta com a mesma href e delegar events de clique da tag

para esta oculta. Para isso, preciso acionar o evento com o mesmo botão do mouse. Não sei ao certo como fazer isso.

js ou jQuery?

jQuery está ok para o meu caso de uso pessoal. Mas para tornar isso útil para um público mais amplo, talvez também poste como fazer isso sem o jQuery, se souber.

Veja também

Existem algumas questões que lidam com este tipo de problema, mas cada um deles olha para um ângulo diferente ou tem restrições diferentes.

Esse é o código para obter a funcionalidade de left click e middle click . tabindex funciona com qualquer elemento html para que você possa usá-lo não o div

 $("#link").on('click', function(e) { const hasTargetBlank = $(this).data('target') === '_blank'; const href = $(this).data('href'); switch(e.which) { // left click case 1: { if (hasTargetBlank) { window.open(href); } else { window.location = href; } break; } // middle click case 2: { window.open(href); break; } // right click case 3: { // do what you want to do } } }); 

Isto é o que eu venho com graças a @JonUleis nos comentários e @MikeWillis em https://stackoverflow.com/a/32868971/246724

  $('.linkbox', context).once('linkbox').each(function(e){ var $linkbox = $(this); var href = $linkbox.data('href'); if (!href) { return; } var $hiddenLink = $('').attr('href', href).hide().appendTo('body'); $linkbox.click(function(e){ $hiddenLink[0].dispatchEvent(new MouseEvent('click', {button: e.button, which: e.which})); e.preventDefault(); }); }); 

Observe que coloquei o link oculto fora da div clicada para evitar a recursion.

O menu do botão direito não me fornece “URL do link de cópia”, mas imagino que seria muito difícil replicá-lo.

ATUALIZAÇÃO: Descobri que realmente não preciso append o link a nada, e ainda funciona. Mas eu só testei isso no Chromium no Linux até agora.