3

Ao utilizar o PHPStorm, percebi um warning apontando para o código onde fiz onclick="javascript:void(0)", recomendando que deixasse apenas onclick="void(0)".

Essa é uma prática recomendada e válida? Achei bem estranho, pois não encontrei nada na internet referente a isso.

3
  • Editei a pergunta para simplificá-la, deixá-la sucinta e direta ao ponto. Também editei o título para descrever fielmente a sua dúvida.
    – Woss
    Commented 22/03/2021 às 16:16
  • Perfeito, exatamente isso que eu queria. Obrigado
    – EvandroPH
    Commented 22/03/2021 às 17:00
  • Relacionado: pt.stackoverflow.com/q/471899/112052
    – hkotsubo
    Commented 22/03/2021 às 22:10

1 Resposta 1

4

Quando avaliados como JavaScript, os dois códigos farão a mesma coisa: avaliar para undefined (que é o que o operador void faz). Na prática, o efeito disso é o mesmo: nada. A diferença entre os dois casos é meramente sintática.

Conforme expliquei aqui, todo código colocado dentro de um attribute event listener é interpretado como código JavaScript normalmente (com algumas diferenças, já explicadas na pergunta).

Desse modo, se você quiser comparar essas duas sequências inseridas em um atributo de evento como onclick, deverá compará-las como código JavaScript. Para isso, podemos comparar a árvore sintática (AST) dos dois. Utilizei o AST explorer para chegar nos resultados que deixarei ao final da pergunta como anexo.


Quando avaliado como JavaScript, javascript:void(0) é basicamente composto por uma expressão (void(0)) identificada pelo label javascript. O label não é um recurso muito comum de ser encontrado em código JavaScript visto que seu uso é decerto raro. A documentação explica como funciona.

Se estiver falando de JavaScript, void(0) e javascript:void(0) não possuem diferenças em questão de efeito, apenas sintática, como se pode verificar no anexo ao final da resposta. É por isso que o linter pede para que se remova o label javascript — como a sequência no atributo onclick denota um código JavaScript, o label nada está fazendo nesse caso.

Por conta disso, presumo ter havido uma confusão. Embora, em atributos de evento (tais como onclick), o prefixo javascript: ser sintaticamente correto (e útil, em alguns casos), quando a sequência é interpretada como um link, o prefixo javascript: é utilizado (e necessário) para denotar que o link trata-se de um código JavaScript.

Desse modo, tratando-se do atributo href de elementos <a>, há diferença entre javascript:void(0) e void(0), uma vez que:

  • <a href="javascript:void(0)"> ... </a> indica uma âncora que contém um link que executa código JavaScript (nesse caso, void(0)). Portanto, trata-se de um endereço válido.
  • <a href="void(0)"> ... </a> indica uma âncora que contém um link inválido. void(0) não é um URL válido.

Em suma, a diferença existe de acordo com a forma como javascript:void(0) e void(0) são interpretados:

  • Se forem interpretados como JavaScript (o que ocorre em atributos de evento como onclick), a diferença é meramente sintática, já que o efeito é o mesmo.
  • Se forem interpretados como um URL (o que ocorre, por exemplo, no atributo href de um elemento <a>), javascript:void(0) é um link válido que denota a avaliação do JavaScript void(0), enquanto void(0) é um link inválido que, portanto, não fará nada.

Anexo: Diferença sintática de código JavaScript

Para javascript:void(0)

{
  "type": "Program",
  "start": 0,
  "end": 18,
  "body": [
    {
      "type": "LabeledStatement",
      "start": 0,
      "end": 18,
      "body": {
        "type": "ExpressionStatement",
        "start": 11,
        "end": 18,
        "expression": {
          "type": "UnaryExpression",
          "start": 11,
          "end": 18,
          "operator": "void",
          "prefix": true,
          "argument": {
            "type": "Literal",
            "start": 16,
            "end": 17,
            "value": 0,
            "raw": "0"
          }
        }
      },
      "label": {
        "type": "Identifier",
        "start": 0,
        "end": 10,
        "name": "javascript"
      }
    }
  ],
  "sourceType": "module"
}

Veja que se trata de uma expressão etiquetada com o label javascript.

Para void(0)

{
  "type": "Program",
  "start": 0,
  "end": 7,
  "body": [
    {
      "type": "ExpressionStatement",
      "start": 0,
      "end": 7,
      "expression": {
        "type": "UnaryExpression",
        "start": 0,
        "end": 7,
        "operator": "void",
        "prefix": true,
        "argument": {
          "type": "Literal",
          "start": 5,
          "end": 6,
          "value": 0,
          "raw": "0"
        }
      }
    }
  ],
  "sourceType": "module"
}

Veja que se trata apenas de uma expressão.

4
  • 1
    É algo difícil de se explicar já que se tratam de dois modos de avaliação diferentes (que ocorrem quando a sequência é interpretada como URI ou código JavaScript). Mais tarde tento revisar o texto para tentar deixá-lo um pouco mais claro. Português é difícil! ¯_(ツ)_/¯ Commented 22/03/2021 às 16:50
  • Ficou muito claro e muito bem explicado. Eu não sabia que o label "javascript" podia ser omitido da propriedade "onclick". Muito obrigado pela resposta!
    – EvandroPH
    Commented 22/03/2021 às 17:01
  • 2
    @EvandroPH, o label nesse caso nem faz muito sentido. É mais uma adição comum porque muita gente coloca o javascript:void(0) no href de um <a>, aí "pega" o hábito e o leva para o onclick. No que tange ao JavaScript, labels são úteis, geralmente, em laços de repetição aninhados. Fora isso, raramente há um caso de uso em que realmente sejam úteis. :) Commented 22/03/2021 às 17:02
  • 2
    @EvandroPH o label não faz parte do onClick e não é a mesma coisa do javascript: em href="javascript:...."... o label ali no onClick poderia ter qualquer nome como onclick="foobar:alert(1)" que vai funcionar. O label é uma parte da linguagem que você pode dar o "nome" que desejar, na verdade onclick="javascript:...." é provavelmente um equivoco de alguém se confundiu e fez algo que deveria ser para o href em onclick. Sobre: label, ele é usado com loops (é vagamente semelhante ao "goto").
    – Syzoth
    Commented 22/03/2021 às 18:34

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 .