Looking for a better way to express this javascript method

Question

var previousZone = null;
//Evaluates whether the currently moused-over item is a RadDockZone.
//TODO: Make more understandable.
function TryGetZoneFromTarget(target) {

    //Done for performance. Comparing object types is slower than a string comparison on ID.
    if (target != null && target.id && target.id.indexOf("RadDockZone") != -1) {
        return $find(target.id);
    }

    if (!target.id) {
        return "IGNORE";
    }

    return null;
}

//Adds highlighting to the dockZones when the user is dragging objects to the screen.
//Clear the old dockZone as the user moves out of it, and color new ones as they move into it.
function OnClientDragging(sender, eventArgs) {
    var target = eventArgs.get_htmlElement();
    var currentZone = TryGetZoneFromTarget(target);

    if (currentZone == "IGNORE") return; //When the user moves the mouse too fast inside of a zone, the zone returns no ID but this is a red-herring.
                                         //Ignoring this prevents flickering where we temporarily remove the highlighting on a zone when not moving out of it.

    if (currentZone) {
        dockZoneDroppedOnID = currentZone.get_id();

        if (previousZone == null) {
            previousZone = currentZone;
            AddHighlighting(currentZone);
        }
        else if (previousZone != currentZone) {
            RemoveHighlighting(previousZone);
            previousZone = currentZone;
            AddHighlighting(currentZone);
        }
    }
    else {
        dockZoneDroppedOnID = "";
        if (previousZone != null) {
            RemoveHighlighting(previousZone);
            previousZone = null;
        }
    }
}

So, I have a weird quirk which is making this method a lot uglier. When the client is dragging their mouse, if they drag too quickly, the target won't return an ID when it actually has one. This was resulting in flickering, I would remove and re-add highlighting when not moving through a zone. As such, I patched in this quick fix... but it's really bad.

What's a proper way of handling such a scenario in Javascript? Should I have an enumeration of three types... "Zone", "NotZone", "Ignore" and work from there? Or...?

public class CormantRadListBox : RadListBox
{
    public CormantRadListBox()
    {
        EnableDragAndDrop = true;
        OnClientDragging = "OnClientDragging";
        OnClientDropping = "OnClientDropping";
        Sort = RadListBoxSort.Ascending;
        Skin = "Web20";
        Width = Unit.Percentage(100);
    }
}

You should return only ID or NULL, and use hoverIntent plugin to avoid flickering: cherne.net/brian/resources/jquery.hoverIntent.html — Ortiga
– Ortiga, Commented Aug 15, 2011 at 22:40
Err.. sorry? I'm not using jQuery's hover. I am using a client-side event bound to an ASP.NET server control. I bind the "OnClientDragging" event inside the constructor for the control. I am not sure where I would introduce hoverIntent in this scenario. — Sean Anderson
– Sean Anderson, Commented Aug 15, 2011 at 22:48

Brian · Accepted Answer · 2011-08-15 22:57:10Z

1

"A better way to write" is always subjective, but if what you mean is your drag zone is undefined, which is a different case than an empty/null result for drag zone, check for undefined, then null, then value:

function TryGetZoneFromTarget(target) { 

     if(/\S/.test(e.target.id) == false){
           return undefined;
     }

     var c = $find(e.target.id);

     if(c && Telerik.Web.UI.RadDockZone.isInstanceOfType(c)) {
        return c;
     }

     return null;
}

function OnClientDragging(sender, eventArgs) {       
     var target = eventArgs.get_htmlElement();       
     var currentZone = TryGetZoneFromTarget(target);   

     if(currentZone === undefined) {
           // return or do nothing
     } else if(currentZone === null) {
           // do something 
     } else {
           // do something else
     }
}

answered Aug 15, 2011 at 22:57

Brian

2,78116 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Paul · Accepted Answer · 2011-08-15 22:52:40Z

0

Your problem with the ids not appearing is likely caused by bubbling of events up the DOM.

If you add code like:

if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();

To the start of your event handler for mousemove where e is the event passed to the handler, it will stop the event from bubbling up to elements with no id, and all your problems should go away, unless I'm mistaken by the cause of the missing ids.

edited Aug 15, 2011 at 22:52

answered Aug 15, 2011 at 22:46

Paul

142k28 gold badges285 silver badges272 bronze badges

Collectives™ on Stack Overflow

Looking for a better way to express this javascript method

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related