javascript - 优化触摸屏的网络界面(处理不需要的鼠标拖动等)

Question

我正在构建一个基于网络的小型信息亭界面，用于 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 元素的方法。 Firefox 效果最好;)

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

你可以把它应用到 body 上

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

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

Preventing images and text to be selected

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