Как отключить выбор для элемента холста html5

Question

Я слушаю события щелчка внутри холста html5, и он работает просто отлично. Однако, когда я щелкаю в любом месте изображения, браузер выделяет его, как если бы оно было выбрано (аналогично тому, как изображение может выглядеть выделенным при нажатии на страницу). Мне было любопытно, если кто-нибудь знает, как отключить выбор HTML-элементов, таких как холст. Я не хочу, чтобы холст отображался в общих чертах, когда кто-то щелкает по нему.

Answer 1

Переходя на bebraw, сходите с ума со стилями CSS и добавьте это в заголовок:

<style type="text/css">
    canvas {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        outline: none;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* mobile webkit */
    }   
</style>

Answer 2

Вы можете попробовать применить несколько CSS-правил:

user-select: none;
-webkit-user-select: none;
-moz-user-select: none;

Как уже упоминал Майкл, стоит отключить jQuery disableTextSelect.Даже если вы не используете его, изучение источника может дать некоторое представление.

Answer 3

Казалось, что только последнее из этих правил CSS делает это.Другие правила вместе не работали (на Safari iOS5), пока я не добавил последнее.

-webkit-tap-highlight-color: rgba(255, 255, 255, 0); 

Answer 4

В некоторой степени связано: если проблема в том, что курсор становится значком выделения (например, при перетаскивании на холст), вы можете отключить это с помощью этого CSS на холсте:

cursor: default;

или предотвращение поведения события по умолчанию в обработчике mousedown:

event.preventDefault();

Answer 5

Я бы использовал jQuery . $('.noSelect').disableTextSelect();