优化触摸屏的web界面(处理不必要的鼠标拖动等)

Question

我正在建立一个小的基于网络的kiosk界面，用于7英寸触摸屏上。我不会详细介绍系统本身，但是触摸屏上的浏览器是一个在Ubuntu上运行的永久全屏幕Firefox。

在触摸屏开始工作后，我用一堆大按钮编写了一个简单的测试页面。在触摸屏上尝试一下，我立即注意到很多快速触摸操作被解释为拖动鼠标。因此，文本被高亮显示，鬼魂图像被拖来拖去，当你随机点击并拖到网页上时，所有发生的事情都会发生。

我想删除所有这些不想要的视觉，让页面注册按钮按下，并忽略任何拖动发生。我已经删除了鼠标光标本身，并通过一些CSS阻止了页面上的文本选择：

* {
    cursor: none;
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit browsers */
}

不过，许多古怪的事情仍在发生。我拍了一段短片来演示：http://www.youtube.com/watch?v=4tjZ5aIG41E

这是视频中的测试页面：http://www.depotstreetmarket.com/touch-test/ (警告:鼠标光标将消失在该页面上--对不起)

有人有什么提示可以帮助我在使用触摸屏时使我的页面更漂亮吗？我对HTML/CSS解决方案、Javascript解决方案和Firefox配置/加载项开放。

编辑--我使用的触摸屏驱动程序是eGalaxTouch，安装在Ubuntu上可能会有帮助。

Answer 1

不过，这是我最接近阻止人们拖动、单击和选择DOM元素的方法。火狐效果最好;)

.selectDisable {-webkit-user-select: none;  -khtml-user-select: none;   -moz-user-select: none; -o-user-select: none;    user-select: none; }

你可以把它用在身体上

其他的东西--就像我在评论中提到的--你可能需要设置设备设置。设置鼠标并将点击设置为“快速”，将拖曳设置为“超长”。

但是在浏览器中禁用拖动效果需要一些DOM调整

防止选择图像和文本

在IE中，应用这个类就足够了。在其他浏览器中，您必须制作一个不可见的(透明的)覆盖div。所以你可以点击你的东西，但是div实际上阻止了它背后的元素的拖动。它的线..。但很管用。帖子里的某个人回答得很好。