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);
    }
}

Answer 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
     }
}

Answer 2

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.