Entry
How can I add a click method to links with NN6/Mozilla?
How can I add a click method to all HTML elements with NN6/Mozilla?
Jun 1st, 2001 02:51
Martin Honnen,
IE4+ provides a
click
method to click an element like a button or a link or even a div via
JavaScript.
In NN6/Mozilla such a method is lacking so far.
Here is JavaScript code to add the method. I have tested it to work
with Mozilla 0.9 so it should work in future NN6 releases. For NN6.0 it
works only for the div and button element while the addition of a click
method to link elements doesn't work.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
adding click method to HTMLElement with Mozilla
</title>
<script type="text/javascript; version=1.5">
try {
// create span element so that HTMLElement is accessible
document.createElement('span');
HTMLElement.prototype.click = function () {
if (typeof this.onclick == 'function')
this.onclick({type: 'click'});
};
}
catch (e) {
alert('click method for HTMLElement couldn\'t be added')
}
try {
// create a element so that HTMLAnchorElement is accessible
document.createElement('a');
HTMLElement.prototype.click = function () {
if (typeof this.onclick == 'function') {
if (this.onclick({type: 'click'}) && this.href)
window.open(this.href, this.target ? this.target : '_self');
}
else if (this.href)
window.open(this.href, this.target ? this.target : '_self');
};
}
catch (e) {
alert('click method for HTMLAnchorElement couldn\'t be added')
}
</script>
<style type="text/css">
#testingDiv { background-color: lime; }
#testingDiv a:link { color: red; }
</style>
</head>
<body>
<div id="testingDiv">
These links are for calling the click methods of the elements below:
<a href="javascript: void 0"
onclick="document.getElementById('aDiv').click();
return false;"
>
click div
</a>
|
<a href="javascript: void 0"
onclick="document.getElementById('aButton').click();
return false;"
>
click button
</a>
|
<a href="javascript: void 0"
onclick="document.getElementById('link0').click();
return false;"
>
click link0
</a>
|
<a href="javascript: void 0"
onclick="document.getElementById('link1').click();
return false;"
>
click link1
</a>
</div>
<div id="aDiv"
onclick="alert(this.id + ' ' + event.type + 'ed.')"
>
clickable div
</div>
<input type="button" id="aButton" value="clickable button"
onclick="alert(this.id + ' ' + event.type + 'ed.')"
/>
<br />
<a id="link0" href="http://www.kibo.com/">
link0 without onclick handler
</a>
<br />
<a id="link1" href="http://www.kibo.com/" target="_blank"
onclick="return confirm('Follow link?');"
>
link1 with onclick handler
</a>
</body>
</html>
