Simulate click with MouseEvents

**Радич** · Feb 28, 2007 03:55

Hello,

(All this is being worked on in FireFox).

I'm trying to simulate a click using MouseEvents, like this:

Code:

var clickEvent = document.createEvents("MouseEvents");
clickEvent.initMouseEvent("click", true, true, window, 1, screenX, screenY + 20, clientX, clientY + 20, false, false, false, false, 0, null);
window.dispatchEvent(clickEvent);

The variables screenX, screenY, clientX, clientY were saved from an actual onClick event. Unfortunately, the event I get when catching the dispatched event in my onClick handler is missing some information (compared to the original onClick event from which I captured the click location). The main thing I'm missing a correct rangeParent and rangeOffset... and that is exactly what I'm looking for! Actually clicking on the modified location does generate a usable event.

Could anyone tell me what I can do to get this to work?

Ron

PS. If you're interested in why I try to do this, I'm trying to implement a (eventually cross-browser) WYSIWYG editor using editable divs (instead of iframes). I want to simulate clicks to be able to move the cursor up and down a line. For more info on the editor (incl. sources): http://sourceforge.net/projects/miller/

**MikeFoster** · Feb 28, 2007 16:23

Are rangeParent/rangeOffset gecko-only? It's not part of any W3C spec is it? I realize you may only be concerned with FF for now, and that's fine, but I'm just curious.

Here is what I've experimented with - but I get the same results as you did:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Range and createEvent Tests</title>
<style type='text/css'>
span {
  cursor:pointer;
  border-bottom:1px dotted red;
}
</style>
<script type='text/javascript'>

var SX, SY, CX, CY;

window.onload = function()
{
//  window.onclick = winOnClick;
  document.getElementById('s1').onclick = spanOnClick;
  document.getElementById('s2').onmouseover = simulateClick;
}
function winOnClick(e)
{
  var s = 'winOnClick\n\n' + 'e.rangeParent: ' + e.rangeParent + '\ne.rangeOffset: ' + e.rangeOffset + '\ne.rangeParent.parentNode.id: ' + e.rangeParent.parentNode.id;
  s += '\n\ne.screenX: ' + e.screenX + '\ne.screenY: ' + e.screenY + '\n\ne.clientX: ' + e.clientX + '\ne.clientY: ' + e.clientY;
  alert(s);
}
function spanOnClick(e)
{
  SX = e.screenX;
  SY = e.screenY;
  CX = e.clientX;
  CY = e.clientY;
  var s = 'spanOnClick\n\n' + 'e.rangeParent: ' + e.rangeParent + '\ne.rangeOffset: ' + e.rangeOffset + '\ne.rangeParent.parentNode.id: ' + e.rangeParent.parentNode.id;
  s += '\n\ne.screenX: ' + e.screenX + '\ne.screenY: ' + e.screenY + '\n\ne.clientX: ' + e.clientX + '\ne.clientY: ' + e.clientY;
  alert(s);
}
function simulateClick()
{
  var sx = SX;
  var sy = SY;
  var cx = CX;
  var cy = CY;
  var s1 = document.getElementById('s1');
  var s = 'simulateClick\n\n';
  //s + 's1.offsetLeft: ' + s1.offsetLeft + '\ns1.offsetTop: ' + s1.offsetTop + '\n\nsx: ' + sx + '\nsy: ' + sy + '\n\ncx: ' + cx + '\ncy: ' + cy;
  alert(s);
  var ev = document.createEvent("MouseEvents");
  ev.initMouseEvent("click", true, true, window, 1, sx, sy, cx, cy, false, false, false, false, 0, null);
  s1.dispatchEvent(ev);
//  window.dispatchEvent(ev);
}
</script>
</head>
<body>
<h1>Range and createEvent Tests</h1>
<h3>Vivamus Pellentesque</h3>
<p><span id='s1'>s1: Click me first.</span> Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet, <span id='s2'>s2: Then click me.</span> consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</body>
</html>

**Радич** · Mar 1, 2007 03:20

IE might not support the rangeOffset and rangeParent, but it looks like they got a moveToPoint function on ranges which should provide an alternative. Hopefully Opera and the KTHML engine also got alternatives so I'll be able to support all main browsers. But for now, Firefox will do.

Anyway, you happen to know an alternative way of achieving what I'm trying to do? I'd be happy to set up a demo page if that would be helpful (though you can also checkout the SVN on sourceforge and take a look, I think the current revision (5) is a bit more buggy than revision 4 (however, 5 has a lot more features).

User Tag List

Thread: Simulate click with MouseEvents

Thread Tools

Display

Simulate click with MouseEvents

Bookmarks

Bookmarks

Posting Permissions