2

我正在构建一个基于 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 配置/插件持开放态度。

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

4

1 回答 1

1

然而,这是我最接近阻止人们拖动、单击和选择我的 DOM 元素的方法。Firefox 效果最好;)

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

你可以把它应用到身体上

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

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

防止选择图像和文本

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

于 2011-05-17T15:41:55.303 回答