CODEWITHSUNDEEP
javascriptmouseevent
ferronrsmith
ferronrsmith

Reputation: 1110

MouseUp not working in IE (sigh!!!!)

function startstretchright(aObj) {
    watcherObj = aObj.parentNode.parentNode;

    var dragWorkspaceDiv = document.createElement("div");
    var dragWorkspaceObj = document.body.appendChild(dragWorkspaceDiv);
    dragWorkspaceObj.id = "dragWorkspace";
    dragWorkspaceObj.style.position = "absolute";
    dragWorkspaceObj.style.left = "0px";
    dragWorkspaceObj.style.top = "0px";
    dragWorkspaceObj.style.width = "100%";
    dragWorkspaceObj.style.height = "100%";
    dragWorkspaceObj.style.cursor = "hand";
    dragWorkspaceObj.style.cursor = "pointer";
    dragWorkspaceObj.style.background = "#000000";
    dragWorkspaceObj.style.filter = "alpha(opacity=1)";
    dragWorkspaceObj.style.opacity = .01;
    dragWorkspaceObj.style.MozOpacity = .01;
    dragWorkspaceObj.style.zIndex = "400";

    addEvent(dragWorkspaceObj, 'mouseup', function() { stopstretching(watcherObj); });
    addEvent(dragWorkspaceObj, 'mouseout', function() { stopstretching(watcherObj); });
    addEvent(dragWorkspaceObj, 'mousemove', continuestretching);

    stretchDirection = "right";
    initialX = locateObject(aObj).x;
    initialLeft = watcherObj.style.marginLeft;
    initialWidth = watcherObj.style.width;

    watcherObjLeftBoundary = 0;
    watcherObjRightBoundary = (document.getElementById("dayHeaderContainer").getElementsByTagName("DIV").length * 100);
    var siblingArr = watcherObj.parentNode.getElementsByTagName("DIV");
    var initialLeftEdge = parseFloat(aObj.parentNode.parentNode.style.marginLeft);
    var initialRightEdge = initialLeftEdge + parseFloat(aObj.parentNode.parentNode.style.width);
    for (var i = 0; i < siblingArr.length; i++) {
        if (siblingArr[i].className == "watcher" && siblingArr[i] != watcherObj) {
            var l = parseFloat(siblingArr[i].style.marginLeft);
            var r = l + parseFloat(siblingArr[i].style.width);
            if (r > watcherObjLeftBoundary && r <= initialLeftEdge) {
                watcherObjLeftBoundary = r;
            }
            if (l < watcherObjRightBoundary && l >= initialRightEdge) {
                watcherObjRightBoundary = l;
            }
        }
    }
}

Stop Stretching Function

function stopstretching(watch) {
    watcherObj = null;
    removeEvent(document.getElementById("dragWorkspace"), 'mouseup', stopstretching);
    removeEvent(document.getElementById("dragWorkspace"), 'mouseout', stopstretching);
    removeEvent(document.getElementById("dragWorkspace"), 'mousemove', continuestretching);
    var objToRemove = document.getElementById("dragWorkspace");
    if (document.all) {
        var oldLayer = objToRemove.removeNode(true);
    } else {
        var oldLayer = objToRemove.parentNode.removeChild(objToRemove);
    }

}

Everything works great in Chrome and Firefox, but in IE the stopstretch event is not firing and I have to click again to actually stop stretching the element :(. Please help me out. On mouseout it should stop stretching.

Upvotes: 0

Views: 2254

Answers (1)

Thai
Thai

Reputation: 11362

When you remove an event, you need to pass the identical function that you used to add it.

When you add an event handler you used: function() { stopstretching(watcherObj); } for mouseup and function() { stopstretching(watcherObj); } for mouseout (these two are different)

So when you remove, you can't just use stopstretching because it's not the one you added. Maybe you can have something like

function stopHandler() {
    stopstretching(watcherObj, stopHandler);
}
addEvent(dragWorkspaceObj, 'mouseup', stopHandler);
addEvent(dragWorkspaceObj, 'mouseout', stopHandler);

And

function stopstretching(watch, handler) {
    watcherObj = null;
    removeEvent(document.getElementById("dragWorkspace"), 'mouseup', handler);
    removeEvent(document.getElementById("dragWorkspace"), 'mouseout', handler);

The code is untested, but I think that it should work.

Upvotes: 1

Related Questions