|
Servlet/JSP | Java | 3115 次查看 |
|---|---|---|
|
||
一，关于prototype.js中发现的问题 在跟我再深入啃啃prototype.js 中我们讨论了prototype.js中得 bind/Event.observe. charon@xxx 提到了 Event.observe(myChk, 'click',showMessage.bind(this), false); 本来做drag的例子，发现prototype.js的个问题。见附件 test.htm 以下贴出了代码： 当注册 div的mousemove事件，并且div中包括个 img元素时，如果我们的注册函数用到prototype.js的bind函数，那拖动鼠标，不会按照你的预想执行函数。以为是 apply/call函数的问题。但在YUL中，注册代码和prototype.js基本类似，但代码会正确执行。郁闷了半天，发现是bind函数实现的问题，与call,apply函数无关。见 varfun=obj.move.bind(obj);//错误,bind函数有问题呀 fun=function(){returnobj.move.apply(obj)};//正确 Event.observe("dragDiv","mousemove",fun,true); 看来prototype.js bind函数的这层包装有问题，虽然我还不能确定问题所在，（估计是闭包引起的）。但建议大家小心了。尤其是实现拖拉功能时。也就在mousemove时才遇到这个问题。 <scriptlanguage=javascriptsrc="prototype1.3.1.js"></script> <scriptlanguage=javascriptsrc="yahoo.js"></script> <scriptlanguage=javascriptsrc="event.js"></script> <body> <divid="dragDiv"> <imgsrc="img.jpg"style="width:280px;height:200px"></img> </div> <SCRIPTLANGUAGE="JavaScript"> <!-- if(window.attachEvent){ }else{ alert("为了测试，请用ie"); } functionDragListener(){ this.down=function(){ returnfalse; }, this.move=function(){ varx=Event.pointerX(event); vary=Event.pointerY(event); window.status="x="+x+";y="+y;//仅在ie下可以运行，为了测试 returnfalse; } } varobj=newDragListener(); //因为我想在方法中用obj对象的内容，所以我用prototype.js的bind方法改变方法的”调用对象“ //当我下压鼠标拖动时，会出现异常 /* $("dragDiv").onmousedown=obj.down.bind(obj); $("dragDiv").onmousemove=obj.move.bind(obj); */ /* $("dragDiv").onmousedown=obj.down;//正确但我们在方法中用this访问到的对象是dom $("dragDiv").onmousemove=obj.move;//正确 */ /* $("dragDiv").onmousedown=associateObjWithEvent(obj,'down');//正确 $("dragDiv").onmousemove=associateObjWithEvent(obj,'move');//正确 */ Event.observe("dragDiv","mousedown",obj.down.bindAsEventListener(obj),true); /* Function.prototype.bind=function(object){ var__method=this; returnfunction(){ __method.apply(object,arguments); } } */ varfun=obj.move.bind(obj);//错误,bind函数有问题呀 fun=function(){returnobj.move.apply(obj)};//正确 Event.observe("dragDiv","mousemove",fun,true); //YAHOO.util.Event.addListener("dragDiv","mousedown",obj.down,obj,true);//正确 //YAHOO.util.Event.addListener("dragDiv","mousemove",obj.move,obj,true);//正确 functionassociateObjWithEvent(obj,methodName){ return(function(e){ e=e||window.event; returnobj[methodName](e); }); } //--> </ | ||