Предотвращение случайного выбора/перетаскивания

У меня есть приложение для рисования с использованием html5 canvas. Когда пользователь рисует, и перо выплывает из области холста, хром выделяет элементы html на странице в синем или желтом цвете.

screen shot

Это подрывает опыт рисования. Есть ли способ предотвратить такое событие?

Код обработки событий и рисования основан на этом сообщении: http://jsfiddle.net/rnNFB/1/

var x ;
var y ;

var lower = $('#lower').get(0).getContext('2d') ;
var upper = $('#upper').get(0).getContext('2d') ;

var dragging = false ;

function drawStroke(ctx){
    var i ;
    ctx.strokeStyle='rgba(0,0,0,0.5)' ;
    ctx.lineWidth=10 ;
    ctx.beginPath() ;
    ctx.moveTo(x[0],y[0]) ;
    for (i=1; i < x.length; i++){
        ctx.lineTo(x[i],y[i]) ;
    }
    ctx.stroke() ;
}

$('#upper').mousedown(function(e){
    x=[e.layerX];
    y=[e.layerY];
    dragging=true}) ;

$('#upper').mousemove(function(e){
    if (dragging){
        x.push(e.layerX);
        y.push(e.layerY);
        upper.clearRect(0,0,upper.canvas.width,upper.canvas.height) ;
        drawStroke(upper) ;
    }}) ;

$('#upper').mouseup(function(e){
    dragging = false ;
    upper.clearRect(0,0,upper.canvas.width,upper.canvas.height) ;
    drawStroke(lower) ;
}) ;

Если вы добавите некоторые теги h1 над тегами холста, то нарисовать на холсте, перетаскивая за пределы рамки, вы увидите синюю подсветку. Есть ли способ предотвратить это поведение?

Ответы

Ответ 1

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

.unselectable {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

JS (требуется только для IE < 10):

// the onselectstart way for navigator.appName === "Microsoft Internet Explorer"
document.onselectstart = function() { return false; };

вне темы, но он также может быть интересен для приложения: если вы выберите большой lineWidth в jsFiddle и очень медленно перемещаете мышь, вы можете увидеть некоторые уродливые эффекты (блоки) в эскизы. Всегда проверяйте, что расстояние от координаты onmousemove (при перетаскивании) до последней координаты не слишком мало. Например, добавьте только координаты в эскиз, если расстояние больше 1/6 от линии.

Ответ 2

Я бы не использовал document.onselectstart. Все, что вам нужно сделать, это поместить это на рассматриваемый холст:

canvas.onselectstart = function() { return false; };

Кроме того, вы можете захватывать события мыши/перемещения/перемещения, которые происходят на вашем холсте, путем установки последнего аргумента addEventListener на true. это позволит вашему рисунку продолжить отлично, даже если мышь покидает холст.

Ответ 3

Попробуйте этот script, он отключит выбор, если для перетаскивания установлено значение true. Таким образом, вы можете выбрать текст, когда вы не рисуете.

document.onselectstart = function( e ) { 
  if (dragging) { 
    e.preventDefault();
    return false;
  }
};