Блог

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

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

 <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>
  

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

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

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

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

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

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

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

 cursor: defau<
  

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

 event.preventDefault();