100分也代表不了我对你的感激

Question

有两个问题：
（1）当鼠标mouseup的时候事件有执行到deleteEvent中，可是没触发方法，还是继续可以拖动，这是为什么？Resize.prototype={
    init:function(content,cut,cutImg,options){
        var handler = this;
        //...
        for(var o in options){
            switch(o){
                case "RightDown":
                    if(options[o]){
                        $(o).onmousedown=function(e){
                            e=e||window.event;
                            handler.RightMouseDown.apply(this,[handler,e]);
                        }
                    }
                    break;
                default:
                    break;
            }
        }
    },
    RightMouseDown:function(e){
        //...
        handler.addEvent("mousemove",handler.RightMouseMove,[handler,para,e]);
        handler.addEvent("mouseup",handler.RightMouseUp,[handler]);
    },
    RightMouseMove:function(){
        //...
    },
    RightMouseUp:function(){
        //...
        handler.deleteEvent("mousemove",handler.RightMouseMove);
        handler.deleteEvent("mouseup",handler.RightMouseUp);
    },
    addEvent:function(name,funName,para){
        var regHandler = funName;
        if(para){
            regHandler=function(){
                funName.apply(this,para);
            }
        }
        if(document.addEventListener){
            document.addEventListener(name,regHandler,true);
        }
        else{
            document.attachEvent("on"+name,regHandler);
        }
    },
    deleteEvent:function(name,funName,para){
        if(document.addEventListener){
            document.removeEventListener(name,funName,true);
        }
        else{
            document.detachEvent("on"+name,funName);
        }
    }
}（2）还是以上代码，在ie拖动没问题，在ff拖动的时候移动一小段距离就停止了，要在去点在去拖就在移动一小段距离
是在一张图片上，然后有个层，层在图片上拖动！为什么在ff拖动不顺畅？

Answer 1

<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<http://wang_jian_999.download.csdn.net/
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<,<

Answer 2

怕发太多更没人愿意看，现在全部发出来,第2个问题解决了，只要帮忙解决第一个就好，不知道为什么,mouseup事件总是失败！var Resize=Class.create();//这个没差，就不发了，相当于构造函数，new的时候会执行init
Resize.prototype={
    init:function(content,cut,cutImg){
        this.content=content;
        this.cut=cut;
        this.cutImg=$(cutImg);
    },
    Set:function(funCase){
        var fun;
        switch(funCase){
            case "RightDown":
                fun=this.RightMouseDown;
                break;
            default:break;
        }
        this.addEvent("mousedown",fun,[this])
    },
    RightMouseDown:function(){
        var handler = arguments[1];
        var e=arguments[0]
        var para={};
        para.mouseX=e.clientX;
        para.mouseY=e.clientY;
        para.cutWidth=handler.cut.offsetWidth;
        para.cutHeight=handler.cut.offsetHeight;
        handler.addEvent("mousemove",handler.RightMouseMove,[handler,para]);
        handler.addEvent("mouseup",handler.RightMouseUp,[handler]);
    },
    RightMouseMove:function(){
    var e=arguments[0]
        var handler=arguments[1];
        var para = arguments[2];
    e.stopPropagation ? e.stopPropagation() : (e.cancelBubble = true);
    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        handler.cut.style.width=e.clientX-para.mouseX+para.cutWidth+"px";
        handler.cut.style.height=e.clientY-para.mouseY+para.cutHeight+"px";
        var rectTop=(parseInt(handler.cut.style.top)+1)+"px";//加1边框
        var rectRight=(parseInt(handler.cut.style.left)+parseInt(handler.cut.style.width)+1)+"px";
        var rectBottom=(parseInt(handler.cut.style.top)+parseInt(handler.cut.style.height)+1)+"px";
        var rectLeft=(parseInt(handler.cut.style.left))+"px";
        handler.cutImg.style.clip="rect("+rectTop+" "+rectRight+" "+rectBottom+" "+rectLeft+")";
    },
    RightMouseUp:function(){
        var handler = arguments[1];
        handler.deleteEvent("mousemove",handler.RightMouseMove);
        handler.deleteEvent("mouseup",handler.RightMouseUp);
    },
    addEvent:function(name,funName,para){
        var regHandler = funName;
        if(para){
            regHandler=function(e){
                funName.apply(this,[e||window.event].concat(para));
            }
        }
        if(document.addEventListener){
            document.addEventListener(name,regHandler,false);
        }
        else{
            document.attachEvent("on"+name,regHandler);
        }
    },
    deleteEvent:function(name,funName){
        if(document.addEventListener){
            document.removeEventListener(name,funName,false);
        }
        else{
            document.detachEvent("on"+name,funName);
        }
    }
}

Answer 3

document.addEventListener(name,regHandler,true);
document.removeEventListener(name,funName,true);
把true改成false试试，
另外，你是在什么浏览器上测试的？在firefox,还是在IE测试的。他们的事件模型不一样。

Answer 4

楼主代码明显已兼容IE和FF 先看看 帮你先顶着~~~~~~

Answer 5

主要是这块，用firebug查看了下，产生了闭包，一直存在堆栈上不释放，导致卸载了mousemove,mouseup后，又移动的话会触发进入产生的这个闭包事件，该如何解决呢？addEvent:function(oTarget,name,funName){
        var args = Array.prototype.slice.call(arguments).slice(3);
        var regHandler=funName
        if(args.length>0){
            regHandler=function(e){
                return funName.apply(this,[e||window.event].concat(args));
            }//这里的regHandler产生了个闭包，一直在堆栈中存在，该怎么解决呢？
        }
        if(oTarget.addEventListener){
            oTarget.addEventListener(name,regHandler,false);
        }
        else{
            oTarget.attachEvent("on"+name,regHandler);
        }
    },

Answer 6

我上面帖的代码中有区分ie和ff,document.attachEvent("on"+name,regHandler);

Answer 7

改成 这样试试？
var _this=this;
regHandler=function(e){
                return funName.apply(_this,[e||window.event].concat(args));
            }

Answer 8

要是先不要传入参数那些代码。
直接
addEvent:function(oTarget,name,funName){
       if(oTarget.addEventListener){
            oTarget.addEventListener(name,funName,false);
        }
        else{
            oTarget.attachEvent("on"+name,funName);
        }
    }
程序能正常吗

Answer 9

//知道哪里有问题了，如果把
//this.addEvent(document,"mousemove",this.bindEvent(this,this.RightDownMouseMove));
//this.addEvent(document,"mouseup",this.bindEvent(this,this.RightDownMouseUp));
//这两个换成下面注释中的就可以正常运行，如果不换成注释的mouseup总是释放不了。是什么原因呢？
var Resize=Class.create();
Resize.prototype={
    init:function(content,cut,cutImg){
        this.content=content;
        this.cut=cut;
        this.cutImg=$(cutImg);
    },
    Set:function(funCase){
        var fun;
        switch(funCase){
            case "RightDown":
                fun=this.RightDownMouseDown;
                this._obj=$(funCase);
                break;
            default:break;
        }
        this.addEvent(this._obj,"mousedown",this.bindEvent(this,fun))
    },
    RightDownMouseDown:function(){
        var e=arguments[0]
        this.para={};
        this.para.mouseX=e.clientX;
        this.para.mouseY=e.clientY;
        this.para.cutWidth=this.cut.offsetWidth;
        this.para.cutHeight=this.cut.offsetHeight;
        this.addEvent(document,"mousemove",this.bindEvent(this,this.RightDownMouseMove));
        this.addEvent(document,"mouseup",this.bindEvent(this,this.RightDownMouseUp));
//        var handler = this;
//        document.onmousemove=function(e){
//            e=e||window.event;
//            handler.RightDownMouseMove(e);
//        }
//        document.onmouseup=function(){
//            document.onmousemove=null;
//            document.onmouseup=null;
//        }
    },
    RightDownMouseMove:function(){
        var e=arguments[0]
        e.stopPropagation ? e.stopPropagation() : (e.cancelBubble = true);
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        this.cut.style.width=e.clientX-this.para.mouseX+this.para.cutWidth+"px";
        this.cut.style.height=e.clientY-this.para.mouseY+this.para.cutHeight+"px";
        var rectTop=(parseInt(this.cut.style.top)+1)+"px";//加1边框
        var rectRight=(parseInt(this.cut.style.left)+parseInt(this.cut.style.width)+1)+"px";
        var rectBottom=(parseInt(this.cut.style.top)+parseInt(this.cut.style.height)+1)+"px";
        var rectLeft=(parseInt(this.cut.style.left))+"px";
        this.cutImg.style.clip="rect("+rectTop+" "+rectRight+" "+rectBottom+" "+rectLeft+")";
    },
    RightDownMouseUp:function(){
        this.deleteEvent(document,"mousemove",this.RightDownMouseMove);
        this.deleteEvent(document,"mouseup",this.RightDownMouseUp);
    },
    bindEvent:function(obj,fun){
          return function(e){
            return fun.apply(obj,[e||window.event]);
          }
    },
    addEvent:function(oTarget,name,funName){
        if(oTarget.addEventListener) {  
             oTarget.addEventListener(name,funName,false);  
        }
        else if(oTarget.attachEvent) {  
             oTarget.attachEvent("on" +name,funName);  
        }
        else{  
             oTarget["on" + name] = funName;  
        } 
    },
    deleteEvent:function(oTarget,name,funName){
        if(oTarget.removeEventListener) {  
            oTarget.removeEventListener(name,funName,false);  
        } 
        else if(oTarget.detachEvent) {  
            oTarget.detachEvent("on" + name,funName);  
        }
        else{  
            oTarget["on" + name] = null;  
        } 
    }
}

Answer 10

       this.addEvent(document,"mousemove",this.bindEvent(this,this.RightDownMouseMove));
        this.addEvent(document,"mouseup",this.bindEvent(this,this.RightDownMouseUp));
---这是添加事件处理函数
    this.deleteEvent(document,"mousemove",this.RightDownMouseMove);
        this.deleteEvent(document,"mouseup",this.RightDownMouseUp);
----这是删除的
但是你的  addevent 和  deleteevent 所接受的两个函数是不同的啊 add里的是经过另外一个函数bindevent处理的返回函数? 就是 function(e){
            return fun.apply(obj,[e||window.event]);
          }
，添加和删除不是同一个，当然会出问题。。
不知道这是不是你说的原因

Answer 11

我还以为是闭包问题，在firebug调式时看到每次一移动就立即调用，原来是没卸载掉该方法！
谢谢你了哈！

Answer 12

UP的事件可以加在document.body上试试

Answer 13

var addEvent = function(name,funName,para){
var regHandler = funName;
if(para){
document.regHandler=function(){
funName.apply(this,para);
}
}
if(document.addEventListener){
document.addEventListener(name,document.regHandler,true);
}
else{
document.attachEvent("on"+name,document.regHandler);
}
};
var deleteEvent = function(name,funName,para){

if(document.addEventListener){
document.removeEventListener(name,document.regHandler,true);
}
else{
document.detachEvent("on"+name,document.regHandler);
}
};
var handler = function(str){
alert(str);
};
var param = ["test"]
addEvent("click",handler,param);
deleteEvent("click",handler,param);这里提供一个思路，主要问题是如果有参数绑定的是regHandler而解绑定的却是funcName。这样肯定不可以。
这里代码只是一个参考，具体还需修改。