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

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

Ответ 1

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

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

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

Ответ 2

Продолжая 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>

Ответ 3

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

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

Ответ 4

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

Ответ 5

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

cursor: default;

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

event.preventDefault();