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

核心提示： 清单 9. prepare_swappable() 函数function prepare_swappable( o ){swappables.push( o );var sdp = new rectangle_drag_handler( o );var hdp = new highligh

清单 9. prepare_swappable() 函数

function prepare_swappable( o )
　{
　　swappables.push( o );
　　var sdp = new rectangle_drag_handler( o );
　　var hdp = new highlighting_drag_handler( o );
　　var both = compose_drag_handlers( sdp, hdp );
　　install_drag_handler( o, both );
　}

除了其他功能之外，此函数最主要的功能是为可切换元素创建 rectangle_drag_handler 和 highlighting_drag_handler，然后再将它们组合成一个综合的拖动处理程序。最后，这个综合拖动处理程序再通过调用 install_drag_handler() 来激活，这将在接下来的两个小节中详细介绍。

安全安装鼠标处理程序

与常规的事件处理程序不同，一个拖动处理程序可以处理多个事件。尽管如此，它还是需要附加到对象，这与常规的事件处理程序相同。

安装任何一种事件处理程序都是需要技巧的，因为正在修改的元素很可能已经在其内安装了事件处理程序。如果要替换这些事件处理程序，就需要更改页面的行为方式。

为了避免这一问题，可以使用一个名为 install_mouse_handlers() 的实用函数，如清单 10 所示。

清单 10. install_mouse_handlers() 函数

function install_mouse_handlers( target, onmouseup, onmousedown, onmousemove )
　{
　　var original_handlers = {
　　　onmouseup: target.onmouseup,
　　　onmousedown: target.onmousedown,
　　　onmousemove: target.onmousemove
　　};
　　target.onmouseup = onmouseup;
　　target.onmousedown = onmousedown;
　　target.onmousemove = onmousemove;
　　return {
　　　restore: function() {
　　　　target.onmouseup = original_handlers.onmouseup;
　　　　target.onmousedown = original_handlers.onmousedown;
　　　　target.onmousemove = original_handlers.onmousemove;
　　　 }
　　};
　}