Do You Ever Need to Specify 'Javascript:' in an Onclick

Do you ever need to specify 'javascript:' in an onclick?

Some of the responses here claim that the "javascript:" prefix is a "leftover from the old days", implying that it's intentionally, specially handled by the browsers for backwards compatibility. Is there solid evidence that this is the case (has anyone checked source code)?

<span onclick="javascript:alert(42)">Test</span>

To me, this just reads as:

javascript:
    alert(42);

Meaning, that "javascript:" is just a label and has no effect. This works, too:

<span onclick="foobar:alert(42)">Test</span>

Update:

I did a little experiment and it turns out that, yes, "javascript:" is handled specially by IE, but definitely not so by Firefox, Safari, Opera or Chrome:

<span onclick="javascript:while (true) { alert('once'); break javascript; }">Test</span>

On non-IE, this will just alert "once", once and then break out of the loop. On IE, I get a "Label not found" error. The following works fine in all browsers:

<span onclick="foo:while (true) { alert('once'); break foo; }">Test</span>

Update 2:

I just realized the link http://crisp.tweakblogs.net/blog/the-useless-javascript-pseudo-protocol.html in one of the answers above pretty much talks about the same thing.

JavaScript - href vs onclick for callback function on Hyperlink

Putting the onclick within the href would offend those who believe strongly in separation of content from behavior/action. The argument is that your html content should remain focused solely on content, not on presentation or behavior.

The typical path these days is to use a javascript library (eg. jquery) and create an event handler using that library. It would look something like:

$('a').click( function(e) {e.preventDefault(); /*your_code_here;*/ return false; } );

React js onClick can't pass value to method

Easy Way

Use an arrow function:

return (
  <th value={column} onClick={() => this.handleSort(column)}>{column}</th>
);

This will create a new function that calls handleSort with the right params.

Better Way

Extract it into a sub-component.
The problem with using an arrow function in the render call is it will create a new function every time, which ends up causing unneeded re-renders.

If you create a sub-component, you can pass handler and use props as the arguments, which will then re-render only when the props change (because the handler reference now never changes):

Sub-component

class TableHeader extends Component {
  handleClick = () => {
    this.props.onHeaderClick(this.props.value);
  }

  render() {
    return (
      <th onClick={this.handleClick}>
        {this.props.column}
      </th>
    );
  }
}

Main component

{this.props.defaultColumns.map((column) => (
  <TableHeader
    value={column}
    onHeaderClick={this.handleSort}
  />
))}

---

Old Easy Way (ES5)

Use .bind to pass the parameter you want, this way you are binding the function with the Component context :

return (
  <th value={column} onClick={this.handleSort.bind(this, column)}>{column}</th>
);

How to set onClick with JavaScript?

I have been unable to reproduce the problem. Contrary to the OP's findings, the line below works fine on the latest versions of IE, FF, Opera, Chrome and Safari.

link.onclick = function() {alert('clicked');};

You can visit this jsFiddle to test on your own browser:

http://jsfiddle.net/6MjgB/7/

Assuning we have this in the html page:

<div id="x"></div>

The following code works fine on the browsers I have tried it with:

var link = document.createElement('a');
link.appendChild(document.createTextNode("Hi"));
link.setAttribute('href', "#");
link.onclick= function() {link.appendChild(document.createTextNode("Clicked"));}

document.getElementById("x").appendChild(link);

If there is a browser compatibility issue, using jQuery should solve it and make code much much more concise:

var $link = $("<a>").html("Hi").attr("href","#").click(function (){$link.html("Clicked")})

$("#x").html($link)

If brevity is not a strong enough argument for using jQuery, browser compatibility should be ... and vise versa :-)

NOTE: I am not using alert() in the code because jsFiddle does not seem to like it :-(

Inline javascript, what is the 'javascript' in 'javascript:alert('asdf')'

It is a label that is ONLY needed in IE if the first script on the page is VBScript

If you add <script type="VBScript"></script> to (older?) IEs your later scripts will fail if they are javascript specific and do not have the label javascript: to tell IE to switch back

See my answer here: What does the JavaScript pseudo protocol actually do?

Javascript Button - method will not be invoked after onClick

you dont need the javascript: bit and the function has an upper case T on to :

<INPUT TYPE="button" NAME="GetLink_button" VALUE="Get link" onClick="getLinkToFile()">

will work fine

How to call javascript from a href?

<a onClick="yourFunction(); return false;" href="fallback.html">One Way</a>

** Edit **
From the flurry of comments, I'm sharing the resources given/found.

Previous SO Q and A's:

• Do you ever need to specify 'javascript:' in an onclick? (and the IE related A's following)
• javascript function in href vs onclick

Interesting reads:

• http://crisp.tweakblogs.net/blog/the-useless-javascript-pseudo-protocol.html
• https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Statements/label

---

Related Topics