SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simulate click with MouseEvents

    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/

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •