Question

我正在使用GWT构建一个机器GUI。

机器有一个触摸屏面板，所以我不需要查看光标，我不希望选择启用。

第一个解决方案是将其放在css文件中：

* {
    /* Hide cursor */
    cursor: none;
    /* Prevent selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

这样可行，但（总有一个但是......）我需要从远程浏览器访问这个GUI。

在这台电脑中我没有触控面板，而是普通键盘。

所以我认为以前的全局风格没有应用。

有一种方法可以从GWT获得吗？我需要用php代替吗？

谢谢！

Answer 1

您是否尝试过针对不同屏幕尺寸的css定位，即如果触摸屏面板是特定尺寸，则可以使用@mediascreen查询仅定位触摸屏，然后继续隐藏光标。

Answer 2

您可以使用JSNI来了解它是否是触控设备。

if (isTouchDevice())
{
         panel.addStyleName("cursorClass");
}
else
{
         panel.addStyleName("noCursorClass");
}

您的JSNI课程将

private native boolean isTouchDevice() /*-{
return !!('ontouchstart' in window) // works on most browsers 
      || !!('onmsgesturechange' in window); // works on ie10
}-*/;

在Web开发人员中测试了上述Javascript，对我来说效果很好。

您的css课程将

.cursorClass{
cursor : pointer;
}
.noCursorClass{
cursor : none;
}

GWT和css：添加动态和全局css规则（又名：阻止选择和光标）

2 个答案: