优化触摸屏的 Web 界面(处理不需要的鼠标拖动等）

Optimizing a web interface for touchscreens (dealing with unwanted mouse-drag, etc)

本文关键字：鼠标 拖动 不需要 触摸屏 Web 界面 优化 处理      更新时间：2023-09-26

我正在构建一个基于 Web 的小型信息亭界面，用于 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 配置/插件持开放态度。

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

然而，这是我最接近阻止人们拖动、点击和选择我的 DOM 元素的方法。火狐工作最好的;)

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

你可以把它应用到身体上

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

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

防止选择图像和文本

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

相关文章：