Troubles Rewriting OnClick Event

[Jamie Jackson]

I'm rewriting all links' onclick events, but I'm having a problem. The
onclick event that I'm inserting works correctly in Opera, but not in
FF or IE.

I'm retroactively adding the statement "return promptBeforeOpening();"
[promptBeforeOpening() is my own custom method.]

FF and IE rewrite it as I would expect them to, but it turns out that
that doesn't work (no disclaimer pops up, and the link is not
disabled):
(Before Rewriting)
onClick:undefined
(After Rewriting)
onClick:return promptBeforeOpening();

Opera seems to do me a favor, and makes it work for me:
(Before Rewriting)
onClick:undefined
(After Rewriting)
onClick:function anonymous(event) {return promptBeforeOpening();}
^^^^^^^^^^^^^^^^^^^^^^^^^^^ ^

See how Opera adds that weird method definition? Whatever that is, it
works.

So, the question is, what do I need to do to get it to work in the
other browsers?

Thanks,
Jamie

<a href="http://www.adcouncil.org/campaigns/adoption/" target="new">my
link</a>

<script type="text/javascript">
function promptBeforeOpening () {
if (confirm("LEAVING SITE X\n\nYou are about to leave site x to go
to another location that is not maintained by x. X takes no
responsibility for and exercises no control over the views that may be
represented, or the accuracy, privacy policies, copyright or trademark
compliance, or the legality of any material contained on external
sites. \n\nTo proceed to the Web site, please select the OK
button.")) {
// confirmed: thank you, drive through
return true;
} else {
// user has cancelled, don't go to link
return false;
}
}


for (var i=0; i < document.links.length; i++) {
// save a copy of any onClick that the link may have originally had
// debug output
document.write("<h4 style='color: blue'>(Before) onClick:" +
document.links.onclick + " Href:" + document.links.href +
"</h4>");
origOnClick = document.links.onclick;
// rewrite the link's onClick to prompt before going
document.links.onclick = "return promptBeforeOpening();";
if (origOnClick != null) {
// old onClick exists, so append it to the new one
document.links.onclick += origOnClick;
}
// debug output
document.write("<h4 style='color: blue'>(After) onClick:" +
document.links.onclick + " Href:" + document.links.href +
"</h4>");
}

</script>

 

[Martin Honnen]

Jamie Jackson wrote:

for (var i=0; i < document.links.length; i++) {
// save a copy of any onClick that the link may have originally had
// debug output
document.write("<h4 style='color: blue'>(Before) onClick:" +
document.links.onclick + " Href:" + document.links.href +
"</h4>");
origOnClick = document.links.onclick;
// rewrite the link's onClick to prompt before going
document.links.onclick = "return promptBeforeOpening();";

The onclick property is usually a function object and not a string (test
typeof origOnClick to check that), thus if you want to assign a
different event handler you need to assign a function. There are
different ways to construct one, you can use a function expresssion:
document.links.onclick = function (evt) {
return promptBeforeOpening();
};
or you can use the Function constructor to create a function
document.links.onclick = new Function("evt",
"return promptBeforeOpening();"
);
or you can declare a gobal function
function newClickHandler (evt) {
return promptBeforeOpening();
}
and assign it
document.links.onclick = newClickHandler;

if (origOnClick != null) {
// old onClick exists, so append it to the new one
document.links.onclick += origOnClick;

Again string operation doesn't help, what could help is
var link = document.links;
link.originalOnclick = link.onclick;
link.onclick = function (evt) {
if (this.originalOnclick) {
this.originalOnclick(evt);
}
return promptBeforeOpening();
};
but depending on what browsers you target you could avoid scripting
onclick as a property and instead use attachEventListener (W3C DOM in
Mozilla, Netscape 6/7, Opera 7) or attachEvent (MSIE 5.5/6 DOM) to add
an additional event handler as needed.

 

[Grant Wagner]

So, the question is, what do I need to do to get it to work in the
other browsers?

document.links.onclick is a reference to the function that handles the
-onclick- event, not a string containing the JavaScript within that
function. So you assign the reference of the function you want to assign
to the -onclick- event:

// note: no brackets on the method
document.links.onclick = promptBeforeOpening;
or:
// if you wanted to pass parameters to the handler
document.links.onclick = function() { return
promptBeforeOpening(something); }

The first one should work for your code.

 

[Jamie Jackson]

Thank you very much, Martin and Grant. That's a BIG help.

Jamie