onclick doesn't work in Internet Explorer... ? 1

[modular]

hi, i've got a one-line script that i'm using to change the 'src' of an image:

function enlargePhoto(the_photo) {
document.getElementById("large_photo").setAttribute("src","photos/" + the_photo + ".jpg");
}

i'm using the following bit of HTML to call the script:

<a href="javascript:;" onclick="enlargePhoto('DSC_0565');">load image</a>

first of all, it's an XHTML document, so the event handlers are all lowercase. it's not a capitalization problem.

the script works fine in Firefox and Safari, but in Internet Explorer the image doesn't show up. however, if i right-click where the image would be and use the "Show Image" context menu option, i can see that the 'src' of the image is getting replaced correctly.

what's totally weird about this is that when i change 'onclick' to 'onmouseover', the script works in Internet Explorer too. using 'onmouseup' (which is mechanically the same thing as 'onclick') does not work, while the handler 'onmousedown' does work.

so the problem seems to be that Internet Explorer isn't correctly interpreting the 'onclick' and 'onmouseup' handlers. i have tried it in IE6 and IE5, the result is the same.

so why doesn't 'onclick' work the same as any other event handler?

 

[Dimandja]

This could be of interest:

"If the user clicks the left mouse button, the onclick event for an object occurs only if the mouse pointer is over the object and an onmousedown and an onmouseup event occur in that order. For example, if the user clicks the mouse on the object but moves the mouse pointer away from the object before releasing, no onclick event occurs. "

http://msdn.microsoft.com/library/d...hop/author/dhtml/reference/events/onclick.asp

__________________________________________
Try forum1391 for lively discussions

 

[modular]

i've deduced that the problem is not with the event handler itself; rather IE doesn't like the "javascript:;" bit that comes before the 'onclick' handler.

it's very strange, though, that it ignores that null link when i use a different event handler and executes the script as expected.

using <a href="#" ... > is not really an option, since that will make the browser windows jump to the top of the page. still wondering if anyone can make this work... i have tried...

javascript:;
javascript:void()
javascript:void(0)

...as alternatives, but they don't change IE's uncooperativeness.

 

[modular]

thanks for the response, Dimandja, but that MSDN article is only explaining the concept of 'onclick' and saying that the full sequence of events - namely, a 'mousedown' and 'mouseup' - must be performed on an object for the 'onclick' event handler to be fired. in the case of my script, the full sequence was taking place, but the javascript:void(0); was not allowing the script to complete.

my solution was to leave out the 'href' attribute of the link and change the cursor to a hand with CSS (cursor: pointer). this way, the interaction appears the same to the visitor, and onclick works as expected. so while i'm still curious about IE's erratic behavior, i pretty much solved the problem

 

[MOrac]

It's not erratic behaviour. The href code is called before the onClick code - something other browsers don't do because that ordering is silly (the onClick would normally never be processed, as a successful href location change is self-terminating) - but given that condition, what happens is logical. The href returns a value equating to false, to cancel the navigation. This is correctly interpreted as an event cancellation, and so the onClick handler never gets called. It works in most other browsers because they call the onClick handler first, and process the href second, which is a lot saner.