Кросс-браузерный способ скрыть отображение выбора

Question

Я делаю браузерную игру на javascript. Таким образом, в игре нигде пользователям не нужно копировать / вставлять текст. Однако есть много мест, где пользователю нужно нажать и перетащить, чтобы сделать выбор в игре.

Внутри игры есть много ячеек, просто внутри обычных ячеек таблицы, с неразрывным пробелом, чтобы они не ломались в Firefox (я мог остановить их в IE, Safari и Opera с CSS, но по какой-то причине этого не произошло я не работаю в 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 )

-moz-user-select: none

Для Chrome и Safari: (пока не удалось найти надежный источник)

-khtml-user-select:none

Если вы предпочитаете решение javascript, вот то, что я нашел из предыдущего ответа :

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

Answer 2

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

Дубликат: https://stackoverflow.com/a/4407335/746491?