css - 跨浏览器方式隐藏选择显示

Question

我正在制作一个基于浏览器的 JavaScript 游戏。因此，在游戏中用户无需复制/粘贴文本。然而游戏中有很多地方需要用户点击并拖动来进行选择。

游戏中有很多单元格，内部只是普通的表格单元格，有一个不间断的空格来阻止它们在 Firefox 中折叠(我可以使用 CSS 阻止 IE、Safari 和 Opera 中的折叠，但由于某种原因它没有'无法在 Firefox 中工作，因此我采用了不间断空格)，使用纯色背景色或背景图像。

当玩家在其中拖动选区时，游戏会通过更改背景颜色来突出显示单元格。但是，浏览器还会突出显示不间断空格，从而在某些单元格上留下灰色矩形。

此外，浏览器使用与游戏不同的方式来确定选择的内容。

例如在 5 x 5 的正方形中，如果用户选择 (1, 1) 到 (3, 3)，游戏会突出显示以下选择:

|   |   |   |   |   |
|   | X | X | X |   |
|   | X | X | X |   |
|   | X | X | X |   |
|   |   |   |   |   |

但浏览器会突出显示以下内容中的不间断空格:

|   |   |   |   |   |
|   |   | X | X | X |
| X | X | X | X | X |
| X | X | X | X |   |
|   |   |   |   |   |

有什么办法可以阻止浏览器选择样式的显示吗？至少在 Firefox 和 Chrome 中，但最好是跨浏览器。

Answer 1

对于 Firefox，您可以添加 css 样式:( mozilla guide )

-moz-user-select: none

对于 chrome 和 safari:(尚未找到可靠的来源)

-khtml-user-select:none

如果您更喜欢 JavaScript 解决方案，这是我从 previous answer 找到的解决方案:

<div onselectstart="return false">some stuff</div>