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

Asked

Viewed 122 times

3

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.

javascript onclick

  • I edited the question to simplify it, make it succinct and to the point. I also edited the title to accurately describe your doubt.

  • Perfect, exactly what I wanted. Thank you

  • Related: https://answall.com/q/471899/112052

1 answer

3


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.

  • 1

    It is difficult to explain since they are two different evaluation modes (which occur when the sequence is interpreted as URI or Javascript code). Later I try to revise the text to try to make it a little clearer. English is hard! _(ツ)_/

  • It was very clear and very well explained. I didn’t know that the "javascript" label could be omitted from the "onclick" property. Thank you very much for your reply!

  • 2

    @Evandroph, the label in this case doesn’t even make much sense. It’s more a common addition because many people put the javascript:void(0) in the href of a <a>, then "pick up" the habit and take it to the onclick. With regard to Javascript, Labels are usually useful in nested repeat loops. Other than that, there is rarely a use case where they really are useful. :)

  • 2

    @Evandroph the label is not part of onClick and is not the same thing as javascript: in href="javascript:...."... the label there on onClick could have any name as onclick="foobar:alert(1)" that will work. The label is a part of the language that you can give the "name" you want, actually onclick="javascript:...." is probably a mistake of someone got confused and did something that should be for href on onclick. About: label, it is used with loops (it is loosely similar to "goto").

Browser other questions tagged javascript onclick

You are not signed in. Login or sign up in order to post.