www.webdeveloper.com
Results 1 to 6 of 6

Thread: Scope issue

  1. #1
    Join Date
    Dec 2005
    Location
    Queen Creek, AZ
    Posts
    1,564

    Scope issue

    Hey guys,

    OK, have a scope problem that I'm gonna throw on here even though I haven't fully investigated it yet...many heads better than 1!

    After a click event on an object, a div appears on screen. On the div is a grab handle to move it. The actual code to move the handle is inside a class called 'utils', which is instantiated in another class called 'mediaGallery'.

    When the drag event is initiated in the utils.initDrag method, an event listener is added to the document which when triggered calls the utils.dragStart handler.

    Now obviously using 'this' in the handler cannot be done as it refers to the document (using FF here). So in the listener I used the 'apply' method to set the scope of 'this' in the handler to the utils class (see code A).

    Here is the issue: in the handler I need to use the event object generated by the mousemove event. I cannot pass it in from the listener as the event object there refers to the mousedown event. Normally it would be passed automatically, but not in this case. So where is my reference to it?


    Code A
    PHP Code:
    document.addEventListener("mousemove", function(){ mediaGallery.utils.dragStart.apply(mediaGallery.utils, []) }, true); 

    utils class (relevant methods only)
    PHP Code:
    initDrag    :    function(eventid)
                        {
                            
    this.dragObj.zIndex 0;
                            var 
    el;
                            var 
    xy;

                            
    // If an element id was given, find it. Otherwise use the element being
                            // clicked on.

                            
    if(id)
                            {
                                
    this.dragObj.elNode document.getElementById(id);
                            }
                            else
                            {
                                if (
    document.all)
                                {
                                    
    this.dragObj.elNode window.event.srcElement;
                                }
                                else
                                {
                                    
    this.dragObj.elNode event.target;
                                }

                                
    // If this is a text node, use its parent element.
                                
    if (this.dragObj.elNode.nodeType == 3)
                                {
                                    
    this.dragObj.elNode this.dragObj.elNode.parentNode;
                                }
                            }

                            
    // Get cursor position with respect to the page.
                            
    if (document.all)
                            {
                                
    window.event.clientX document.documentElement.scrollLeft document.body.scrollLeft;
                                
    window.event.clientY document.documentElement.scrollTop document.body.scrollTop;
                            }
                            else
                            {
                                
    event.clientX window.scrollX;
                                
    event.clientY window.scrollY;
                            }

                            
    // Save starting positions of cursor and element.
                            
    this.dragObj.cursorStartX x;
                            
    this.dragObj.cursorStartY y;
                            
    this.dragObj.elStartLeft  parseInt(this.dragObj.elNode.style.left10);
                            
    this.dragObj.elStartTop   parseInt(this.dragObj.elNode.style.top,  10);

                            if (
    isNaN(this.dragObj.elStartLeft)) this.dragObj.elStartLeft 0;
                            if (
    isNaN(this.dragObj.elStartTop))  this.dragObj.elStartTop  0;

                            
    // Update element's z-index.
                            
    this.dragObj.elNode.style.zIndex = ++this.dragObj.zIndex;

                            
    // Capture mousemove and mouseup events on the page.
                            
    if (document.all)
                            {
                                
    document.attachEvent("onmousemove", function(){ mediaGallery.utils.dragStart.apply(mediaGallery.utils, []) });
                                
    document.attachEvent("onmouseup", function(){ mediaGallery.utils.dragStop.apply(mediaGallery.utils, []) });
                                
    window.event.cancelBubble true;
                                
    window.event.returnValue false;
                            }
                            else
                            {
                                
    document.addEventListener("mousemove", function(){ mediaGallery.utils.dragStart.apply(mediaGallery.utils, []) }, true);
                                
    document.addEventListener("mouseup", function(){ mediaGallery.utils.dragStop.apply(mediaGallery.utils, []) }, true);
                                
    event.preventDefault();
                            }
                        },
                        
        
    dragStart    :    function(event)
                        {
                            var 
    xy;

                            
    // Get cursor position with respect to the page.
                            
    if (document.all
                            {
                                
    window.event.clientX document.documentElement.scrollLeft document.body.scrollLeft;
                                
    window.event.clientY document.documentElement.scrollTop document.body.scrollTop;
                            }
                            else
                            {
                                
    event.clientX window.scrollX;
                                
    event.clientY window.scrollY;
                            }

                            
    // Move drag element by the same amount the cursor has moved.
                            
    this.dragObj.elNode.style.left = (this.dragObj.elStartLeft this.dragObj.cursorStartX) + "px";
                            
    this.dragObj.elNode.style.top  = (this.dragObj.elStartTop  this.dragObj.cursorStartY) + "px";

                            if (
    document.all
                            {
                                
    window.event.cancelBubble true;
                                
    window.event.returnValue false;
                            }
                            else
                            {
                                
    event.preventDefault();
                            }
                        },
                        
        
    dragStop    :    function()
                        {
                            
    // Stop capturing mousemove and mouseup events.
                            
    if (document.all)
                            {
                                
    document.detachEvent("onmousemove"this.dragStart);
                                
    document.detachEvent("onmouseup"this.dragStop);
                            }
                            else
                            {
                                
    document.removeEventListener("mousemove"this.dragStarttrue);
                                
    document.removeEventListener("mouseup"this.dragStoptrue);
                            }
                        } 
    Any help is greatly appreciated.

    // CM
    Design first! Code later!

  2. #2
    Join Date
    Oct 2008
    Posts
    349
    PHP Code:
    document.addEventListener("mousemove", function(evt){ mediaGallery.utils.dragStart.apply(mediaGallery.utils, [evt]) }, true); 
    Last edited by voidvector; 11-29-2008 at 03:48 AM. Reason: remove IE stuff, as addEventListener doesn't exist on IE

  3. #3
    Join Date
    Dec 2005
    Location
    Queen Creek, AZ
    Posts
    1,564
    Thanks void,

    Didn't think to just pass reference to the object.

    Works a treat for adding the event listener, problem now of course is removing it, as it is not attached to this.dragStart but an anonymous function to allow for the apply method.
    I'll play with it...are all anonymous functions the same in the global scope and just unique their parents scope, or is every one unique? If it is the former I should be able to wrap the listener in a function in the removeEventListener call.

    Thanks.
    Last edited by CrazyMerlin; 12-01-2008 at 02:49 PM. Reason: Added some intrigue
    Design first! Code later!

  4. #4
    Join Date
    Oct 2008
    Posts
    349
    You need a pointer to the function in order to remove the event handler. So a pure anonymous function won't work.

  5. #5
    Join Date
    Dec 2005
    Location
    Queen Creek, AZ
    Posts
    1,564

    bumping

    Sorry about the double post, but wanted to make sure this gets seen by any interested parties.

    The way I fixed this was to create an object and add the anonymous functions as properties of it, thus making them no longer anonymous and allowing for reference to them:

    Code:
    [in object header]
    fAnon		:	{},
    then in the function which adds the listeners:
    Code:
    this.fAnon.dragStart = function(evt){ mediaGallery.utils.dragStart.apply(mediaGallery.utils, [evt]) };
    this.fAnon.dragStop = function(evt){ mediaGallery.utils.dragStart.apply(mediaGallery.utils, [evt]) };
    document.addEventListener("mousemove", this.fAnon.dragStart, true);
    document.addEventListener("mouseup", this.fAnon.dragStop, true);
    event.preventDefault();
    and thusly in the function called to clear the listeners:
    Code:
    document.removeEventListener("mousemove", this.fAnon.dragStart, true);
    document.removeEventListener("mouseup", this.fAnon.dragStop, true);

    Hope that helps anyone using a similar/same method.

    //erlin!
    Design first! Code later!

  6. #6
    Join Date
    Dec 2005
    Location
    Queen Creek, AZ
    Posts
    1,564
    lol, just saw your post Void, thanks
    Design first! Code later!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles