I. problems found in prototype. js
In [url = http://www.sumso.com/dkblog/index.php? Action = show & bid = 120] "tell me more about prototype. js" [url]
In prototype. JS, bind/event. Observe.
Charon @ xxx mentioned event. Observe (mychk, 'click', showmessage. BIND (this), false );In this example, we found a problem with prototype. js. See AttachmentClick here to download the attachment (mydrag.rar)Test.htm The following code is provided:
When registering the DIV mousemove event and the DIV contains an IMG element, if our registration function uses prototype. JS's bind function. If you drag the mouse, the function will not be executed as expected. This is a problem with the apply/call function. But in Yul, the registration code is basically similar to prototype. JS, but the code will be correctly executed. After being depressed for half a day, we found that it was a problem with the implementation of the BIND function, and it had nothing to do with the call and apply functions. See VaR fun = obj. Move. BIND (OBJ); // error. The BIND function is faulty.
Fun = function () {return obj. Move. Apply (OBJ)}; // correct
Event. Observe ("dragdiv", "mousemove", fun, true ); It seems that there is a problem with the packaging of the prototype. js bind function, although I still cannot determine the problem (probably caused by closures ). But we suggest you be careful. Especially when the drag function is implemented. This problem is only encountered during mousemove. <Script language = JavaScript src = "prototype1.3.1.js"> </SCRIPT>
<Script language = JavaScript src = "yahoo. js"> </SCRIPT>
<Script language = JavaScript src = "event. js"> </SCRIPT>
<Body>
<Div id = "dragdiv">
</img>
</Div>
<Script language = "JavaScript">
<! --
If (window. attachevent ){ } Else {
Alert ("to test, use IE ");
}
Function draglistener (){
This. Down = function (){
Return false;
},
This. Move = function (){
VaR x = event. pointerx (event );
Var y = event. pointery (event );
Window. Status = "x =" + x + "; y =" + Y; // run only in IE to test
Return false;
}
}
VaR OBJ = new draglistener ();
// Because I want to use the OBJ object content in the method, I use the bind method of prototype. js to change the "Call object" of the method.
// An exception occurs when I press the mouse down. /*
$ ("Dragdiv"). onmousedown = obj. Down. BIND (OBJ );
$ ("Dragdiv"). onmousemove = obj. Move. BIND (OBJ );
*/ /*
$ ("Dragdiv"). onmousedown = obj. Down; // correct, but the object we use this to access in the method is Dom.
$ ("Dragdiv"). onmousemove = obj. Move; // correct
*/ /*
$ ("Dragdiv"). onmousedown = associateobjwithevent (OBJ, 'low'); // correct
$ ("Dragdiv"). onmousemove = associateobjwithevent (OBJ, 'Move '); // correct
*/ Event. Observe ("dragdiv", "mousedown", obj. Down. bindaseventlistener (OBJ), true );
/*
Function. Prototype. Bind = function (object ){
VaR _ method = this;
Return function (){
_ Method. Apply (object, arguments );
}
}
*/
VaR fun = obj. Move. BIND (OBJ); // error. The BIND function is faulty.
Fun = function () {return obj. Move. Apply (OBJ)}; // correct
Event. Observe ("dragdiv", "mousemove", fun, true ); // Yahoo. util. event. addlistener ("dragdiv", "mousedown", obj. Down, OBJ, true); // correct
// Yahoo. util. event. addlistener ("dragdiv", "mousemove", obj. Move, OBJ, true); // correct Function associateobjwithevent (OBJ, methodname ){
Return (function (e ){
E = E | window. event;
Return OBJ [methodname] (e );
});
}
// -->
</SCRIPT>
</Body> Ii. Suggestions on implementation of code dragging The attachment contains the drag code that I implemented. It is a failure. I think the problem is too simple. Now let's sum up some experience and share it with you.
1. Time Registration Method
(1) $ ("dragdiv"). onmousedown = obj. Down; typical traditional event registration method. disadvantage: one element is a processing function, obviously not good enough.
(2) event. Observe ("dragdiv", "mousemove", fun, true );
Yahoo. util. event. addlistener ("dragdiv", "mousedown", obj. Down, OBJ, true );
W3C event model, Mozilla addeventlistener, ie attachevent..., on the 110 page of Ajax in action Chinese version, the author said something wrong. However, prototype. js and Yul all solve this problem.
(3) The self-implemented swing-like event registration mechanism mentioned in Ajax in action may be a good choice. 2. Time registration Elements
The attachment contains my simple example. I thought it would be good to register the event to the element to be dragged, which can avoid confusion or management with other events, and the effect is very poor, it is difficult to control when the mouse moves quickly or when the mouse reaches the border of the browser.
It can be seen that registering an event to a document is a good choice, which can cause great difficulty in programming.
See dojo. DND. htmldragmanager for dojo-0.3.0,
Dragdrop. js in Yul. Note: In Yul, onmousedown is registered to the dragged element, while move and up are registered to the document.
3. Reuse of drag code
The implementation of layer dragging is very simple, but it is very difficult for me to reuse it. The main problem is event registration. Dojo provides good support for event registration, but it is also complex enough.
These layers of dojo and Yul do not seem to have good control over moving the mouse out of the browser. The actual status of http://script.aculo.us/is also quite different, especially when there are many buckets. Feeling http://www.google.com/ig? Hl = ZH-CN is the best. If you don't consider "reuse", you can use it on your own. Javascript class libraries generally lack system testing. Hurry up and look forward to dojo. |
