用 JavaScript 创建模块化的交互用户界面

核心提示： install_mouse_handlers() 函数负责向特定的对象添加特定的鼠标处理程序，它返回的是一个对象，用 JavaScript 创建模块化的交互用户界面(8)，可使用该对象恢复原始的处理程序，这样一来，该处理程序将被删除，在拖放过程完成后再恢复它，当拖放过程结束后，就可以调用

install_mouse_handlers() 函数负责向特定的对象添加特定的鼠标处理程序。它返回的是一个对象，可使用该对象恢复原始的处理程序。这样一来，当拖放过程结束后，就可以调用 restore() 函数，恢复到拖放过程开始之前的状态。

激活拖动处理程序

针对拖放操作的拖动处理程序使用了这三个鼠标处理程序：onmousedown、onmouseup 和 onmousemove。不过，开始时，只需安装 mousedown 处理程序，因为此时您尚在等待激发初始化拖放过程的单击。

当单击发生时，就需要安装 mousemove 和 mouseup 处理程序。而且，在此时，不再需要 mousedown 处理程序，因为已经进行单击。该处理程序将被删除，在拖放过程完成后再恢复它。最初的 mousedown 处理程序如清单 11 所示。

清单 11. 最初的 mousedown 处理程序

var onmousedown = function( e ) {
　　var x = e.clientX;
　　var y = e.clientY;
　　p.start( x, y );
　　var target_handler_restorer = null;
　　var document_handler_restorer = null;
　　var onmousemove = function( e ) {
　　　var x = e.clientX;
　　　var y = e.clientY;
　　　p.move( x, y );
　　};
　　var onmouseup = function( e ) {
　　　p.done();
　　　target_handler_restorer.restore();
　　　document_handler_restorer.restore();
　　};
　　target_handler_restorer =
　　　install_mouse_handlers( target, onmouseup, null, onmousemove );
　　document_handler_restorer =
　　　install_mouse_handlers( document, onmouseup, null, onmousemove );
　　e.stopPropagation();
　　return false;
　};