SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    the Netherlands
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Event handling problems in FireFox...

    I have the following javascript:
    Code:
    <script type="text/javascript">
    <!--
    function start_drawline(obj, event) {
        coordA = get_relativeMousePos(obj, event);
        coordB = null;
    
        obj.onmousemove = function(obj, event) { do_drawline(this, event); }
        obj.onmouseup = function(obj) { end_drawline(this); }
    }
    
    function do_drawline(obj, event) {
        coordB = get_relativeMousePos(obj, event);
    
    // do the actual drawing!
    }
    
    function end_drawline(obj) {
        if (coordB) {
            var dX = Math.abs(coordA[0] - coordB[0]);
            var dY = Math.abs(coordA[1] - coordB[1]);
            var length = Math.round(Math.sqrt(Math.pow(dX, 2) + Math.pow(dY, 2)) * 100) / 100;
        }
    
        obj.onmousemove = null;
        obj.onmouseup = null;
    }    
    
    function get_relativeMousePos(obj, event) {
        get_absoluteMousePos(event);
    
        relX = absX - get_objectPos(obj)[0];
        relY = absY - get_objectPos(obj)[1] + get_windowScrollOffset();
    
        return [relX, relY];
    }
    
    function get_absoluteMousePos(event) {
        var event = (!event) ? window.event : event;
    
        if (document.all) {
            absX = event.clientX;
            absY = event.clientY;
        } else {
            absX = event.pageX;
            absY = event.pageY;
        }
    }
    
    function get_objectPos(obj) {
        objLeft = obj.offsetLeft;
        objTop = obj.offsetTop;
    
        while (obj.offsetParent != null) {
            objParent = obj.offsetParent;
            objLeft += objParent.offsetLeft;
            objTop += objParent.offsetTop;
    
            obj = objParent;
        }
        return [objLeft, objTop];
    }
    
    function get_windowScrollOffset() {
        if (document.all) {
            windowHeight = document.documentElement.clientHeight;
            windowScrollOffset = document.documentElement.scrollTop;
            if (windowHeight == 0) {
                windowScrollOffset = document.body.scrollTop;
            }
        } else if (document.getElementById) {
            windowScrollOffset = 0;
        }
    
        return windowScrollOffset;
    }
    //-->
    </script>
    and the following HTML:
    HTML Code:
    <div id="canvas" style="width: 100px; height: 100px;" onmousedown="start_drawline(this, event);"></div>
    In IE6 (no idea about IE7 - can't test at work) this works, however FireFox stops the moment I drag my mouse, stating "event has no properties" and points to the line that contains "absX = event.pageX;"

    I suspect this has to do with the way I added the onmousemove event to the div, because if I assign the same function to onclick inline, I get no errors.

    Anybody who can help me make this code cross-browser?
    Danny Bessems - Online-Roleplaying.commodities

    So You've Won The Argument; That Doesn't Mean You're Right!

  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)
    Firefox doesn't have "window.event", so you can't pass it in the inline handler. Instead of using an inline handler, do something like this:
    Code:
    window.onload = function()
    {
      var e = document.getElementById('canvas');
      if (e) e.onclick = start_drawline; 
    }
    and now start_drawline should use "this" instead of "obj".

    For reference...

    xEvent
    xAddEventListener
    xEnableDrag

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    the Netherlands
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MikeFoster View Post
    Firefox doesn't have "window.event", so you can't pass it in the inline handler. Instead of using an inline handler, do something like this:
    Code:
    window.onload = function()
    {
      var e = document.getElementById('canvas');
      if (e) e.onclick = start_drawline; 
    }
    and now start_drawline should use "this" instead of "obj".

    For reference...

    xEvent
    xAddEventListener
    xEnableDrag
    I'm confused with your answer: How does your answer relate to my problem?

    I can use all the functions perfectly fine when I call them inline (through for example onclick), yet I start getting problems when the function is called after it has been added with "obj.onmousemove = function(obj, event) { do_drawline(this, event); }"

    I'm not about to disregard your input, I just don't understand how it can be relevant (I'm not well versed when it comes to adding eventhandlers on the fly).
    Danny Bessems - Online-Roleplaying.commodities

    So You've Won The Argument; That Doesn't Mean You're Right!

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    the Netherlands
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, using your code as an example, I have rewritten my functions to use "this" instead of "obj" and voila it works!

    I'm still unsure what the exact difference is, but thanks loads!
    Danny Bessems - Online-Roleplaying.commodities

    So You've Won The Argument; That Doesn't Mean You're Right!

  5. #5
    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)
    Ah, ok. I missed this when I first looked at your code:
    Code:
      obj.onmousemove = function(obj, event) { do_drawline(this, event); }
      obj.onmouseup = function(obj) { end_drawline(this); }
    When onmousemove is called it will not be passed 2 arguments - only one, the event object (but not in IE).



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
  •