What is the difference between "javascript:void(0)" and only "void(0)" when defining onclick in HTML?

Question

When using Phpstorm, I noticed a Warning pointing to the code where I did onclick="javascript:void(0)", recommending that you leave only onclick="void(0)".

Is this a good and valid practice? I found it very strange, because I did not find anything on the internet related to this.

Answer 1

When evaluated as Javascript, the two codes will do the same thing: evaluate to undefined (which is what the operator void does). In practice, the effect of this is the same: nothing. The difference between the two cases is merely syntactic.

As I explained here, every code placed within a attribute Event Listener is interpreted as Javascript code normally (with some differences already explained in the question).

So, if you want to compare these two sequences inserted in an event attribute like onclick, you should compare them as Javascript code. For this, we can compare the syntactic tree (AST) of the two. I used the AST explorer to achieve the results I will leave at the end of the question as an annex.

---

When evaluated as Javascript, javascript:void(0) is basically composed of an expression (void(0)) identified by label javascript. The label is not a very common resource to be found in Javascript code since its use is certainly rare. A documentation explains how it works.

If you’re talking about Javascript, void(0) and javascript:void(0) have no differences in effect, only syntactic, as can be seen in the annex at the end of the answer. That is why the linter calls for the removal of the label javascript - as the sequence in the attribute onclick denotes a Javascript code, the label nothing is doing in this case.

Because of this, I assume there has been a confusion. Although, in event attributes (such as onclick), the prefix javascript: syntactically correct (and useful in some cases) when the sequence is interpreted as a link, the prefix javascript: is used (and necessary) to denote that the link is a Javascript code.

Thus, in the case of the attribute href of elements <a>, there’s a difference between javascript:void(0) and void(0), since:

• <a href="javascript:void(0)"> ... </a> indicates an anchor that contains a link that executes Javascript code (in this case, void(0)). Therefore, this is a valid address.
• <a href="void(0)"> ... </a> indicates an anchor containing an invalid link. void(0) is not a valid URL.

---

In short, the difference exists according to how javascript:void(0) and void(0) are interpreted:

• If interpreted as Javascript (what happens in event attributes like onclick), the difference is merely syntactic, since the effect is the same.
• If they are interpreted as a URL (which occurs, for example, in the attribute href of a single element <a>), javascript:void(0) is a link valid denoting Javascript evaluation void(0), while void(0) is a link invalid who therefore will do nothing.

---

Annex: Syntactic Javascript Code Difference

To 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"
}

Note that this is an expression tagged with the label javascript.

To 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"
}

Note that this is just an expression.