I want to be able to programatically click on the center of an <INPUT type=image ...> element (I only care about IE
5.5+). This should work regardless of whether IE has focus. Normally you would do myDomElement.click and the mouse
doesn't matter, but in the case of an input image element, what happens is the submitted url has something like
"?x=12&y=7" appended to it (the numbers vary per mouse position on the clicked element). If you hit the spacebar
while that element has focus or do the .click path, then you wind up with "?x=0&y=0" appended to the submitted url,
which is no good for me.
One possible idea that I have not gotten to work is to create an approriately named hidden element (in our case
<input type=hidden name=x> and <input type=hidden name=y>) and set up an onClick handler and insert the position
values that way [document.all.x.value = myImageElement.offsetWidth / 2]. However, if I insert this element at the
end of the form, what happens then is the submitted url's string has a string like "?x=14&x=0&y=0" appended, which is
not good enough (for example, PHP will eat the x=14, and who's to say what other web servers do?) The situation is
even worse if I insert the hidden element at the beginning of the form, because then the initial click handler will
set the hidden element's value, but then quietly dies. Perhaps this method can be patched up, though.
The other idea that I had was to use .click with .fireEvent as the code below illustrates (it can also be used to
test the above hidden element idea). However, while I am able to modify the click event, the onSubmit event's values
don't change. In particular, if I position the mouse above the image element before pressing the "Click me" button,
then the mouse coordinates for the onSubmit event appear correct, but the final string comes out with 0's. Similar
comments apply if you press the space bar while the focus is on the image element.
Thanks,
Csaba Gabor from New York
<HTML>
<HEAD>
<TITLE>fireEvent testing</TITLE>
<SCRIPT>
var TmpOnClick; // a unique temporary variable
function clickHandler() {
// clickHandler is supposed to rewrite the x,y coordinates of the mouse click
var myButton = document.getElementsByTagName("INPUT")[0];
var newEvent = document.createEventObject();
newEvent.offsetX = myButton.offsetWidth / 2; // middle of image
newEvent.offsetY = myButton.offsetHeight / 2; // middle of image
newEvent.cancelBubble = false;
newEvent.button = 1;
myButton.onclick = window.TmpOnClick; // Replace the original click handler
myButton.fireEvent ("onclick", newEvent); // Allow the original handler to take over
event.cancelBubble = true; // Cancel the on hold original event
}
function clickMeSub() {
var myButton = document.getElementsByTagName("INPUT")[0];
window.TmpOnClick = myButton.onclick; // Save any old click handler
myButton.onclick = clickHandler // Insert our click handler
myButton.click(); // Now invoke it
}
</SCRIPT>
</HEAD>
<BODY bgcolor=yellow style=margin-left:.4in>
<FORM onsubmit="alert('submit fired: '+event.offsetX+','+event.offsetY);return true;">
<INPUT type=image
onclick="alert('on click fired: '+event.offsetX+','+event.offsetY);return true;"
title="Click with mouse to see both onClick and onSubmit fire."
accesskey=s value=SubmitMe>
<BUTTON onclick="clickMeSub();return false;"
title="Simulates a click event, but fails to submit mouse coordinates."
accesskey=c><u>C</u>lick me</BUTTON>
</FORM>
</BODY>
</HTML>
