开发学院网页设计 JavaScript JavaScript CSS修改学习第六章：拖拽阅读

JavaScript CSS修改学习第六章：拖拽

　2010-03-30 00:00:00　来源：WEB开发网　　　

核心提示： 事件的其余部分也非常的模糊，当你想检测方向键的时候键盘事件尤为麻烦，JavaScript CSS修改学习第六章：拖拽(8)，首先我们需要一个允许重复点击的事件，因为用户可能按着方向键不放，那么元素在Opera和Safari1.3里面移动一次以后就会停止，这就是为什么我们还需要keypress，那

事件的其余部分也非常的模糊。当你想检测方向键的时候键盘事件尤为麻烦。

首先我们需要一个允许重复点击的事件，因为用户可能按着方向键不放，那么事件就需要一遍遍的触发，这样拖拽才能继续。所以我们使用keypress事件。

不幸的是，IE在keypress的情况下不支持方向键。在IE里面keydown会重复发生，看起来我们需要使用keydown事件了。

你可能才到事情没那么简单。在Opera和Safari里面keydown事件只能触发一次，所以当用户按下键之后，元素移动一次之后就不动了。在这些浏览器中我们需要keypress。

所以理想情况下，我们使用keypress，如果不支持就是用keydown。但是怎么切换事件呢？你又怎么知道keypress在这个时候不能用呢？

我的解决办法就是给keypress事件设置一个事件处理程序。如果这个程序执行了说明支持keypress，我们就可以安全的切换了。

startDragKeys函数用来设置keydown和keypress事件：

1　addEventSimple(document,'keydown',dragDrop.dragKeys); 2　addEventSimple(document,'keypress',dragDrop.switchKeyEvents);

首先keydown触发完成拖拽的dragKeys函数。这是第一个触发的事件，而且元素总会移动。然后我们做其他的话，那么元素在Opera和Safari1.3里面移动一次以后就会停止。

这就是为什么我们还需要keypress。第一个keypress事件会触发switchKeyEvents函数，这个函数会调整事件处理程序：

1　switchKeyEvents:　function　()　{ 2　　　　　removeEventSimple(document,'keydown',dragDrop.dragKeys); 3　　　　　removeEventSimple(document,'keypress',dragDrop.switchKeyEvents); 4　　　　　addEventSimple(document,'keypress',dragDrop.dragKeys); 5　},

编缉推荐阅读以下文章