Empêcher l'activation accidentelle de sélectionner/déplacer la surbrillance

J'ai une application de dessin à l'aide de html5 canvas. Lorsque l'utilisateur est le dessin et le stylo glisse hors de l'espace de la toile, inserts chromés éléments html de la page en bleu clair ou jaune.

C'est perturbant pour le dessin de l'expérience. Est-il possible d'empêcher une telle évidence de passe?

La gestion des événements et le code de dessin est basé sur ce post: 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) ;
}) ;

Si vous ajoutez des balises h1 au-dessus de la toile tags ensuite dessiner sur le canevas, la faisant glisser à l'extérieur de la boîte englobante, vous verrez un surlignée en bleu. Est-il un moyen pour éviter ce problème?

Ce problème n'est pas seulement limitée à la toile.
Oui, c'est applicable à tout le glisser-déposer, ligne de sélection, etc, à peu près tout ce qui n'est pas simplement du texte contenu lié... j'ai trouvé la réponse ci-dessous pour être utile dans de nombreux contextes.

InformationsquelleAutor Homan | 2011-08-14

26

Appliquer la suivante classe CSS pour les éléments qui devraient être impossibles à sélectionner. Il peut aussi bien être appliqué sur le corps (bien que, les bonnes pratiques pourrait être seulement de désactiver la sélection de l'utilisateur sur les éléments qui en ont vraiment besoin).
```
.unselectable {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
```
JS (nécessaire uniquement pour IE < 10):
```
//the onselectstart way for navigator.appName === "Microsoft Internet Explorer"
document.onselectstart = function() { return false; };
```
hors-sujet, mais il pourrait également être intéressant pour l'application: Si vous sélectionnez une grande largeur de raie dans le jsFiddle et déplacez la souris très lentement, vous pouvez voir les moches, les effets (blocs) dans le croquis. Toujours vérifier que la distance de la onmousemove (tout en faisant glisser) se coordonnent pour la dernière de coordonnées n'est pas trop petit. Par exemple, seulement ajouter les coordonnées de l'esquisse si la distance est supérieure à environ 1/6 de la linewith.
- cela fonctionne merci! Je vais probablement juste avoir l'intégralité de la page "unselectable" appliquée partout, tout le temps parce que parfois, l'événement mouseDown se produit accidentellement, juste à l'extérieur de la toile ainsi. Aussi, extra, merci pour le conseil sur les grosses lignes! Je me demandais le pourquoi de ce produit. Merci!
- user-select est maintenant pris en charge par tous les principaux navigateurs (voir caniuse.com/user-select-none). Cela simplifie la mise en œuvre. Utilisez simplement .css('user-select', 'none'). Si vous avez besoin d'IE 10, vous êtes hors de la chance et de la nécessité d'appliquer des hacks.
InformationsquelleAutor
5

Je ne voudrais pas utiliser document.onselectstart. Tout ce que vous avez à faire est de mettre cela sur la toile en question au lieu de cela:

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

En outre vous pouvez capturer la souris vers le bas/déplacer/les évènements qui se produisent sur votre toile en définissant le dernier argument de addEventListener à true. cela permettra à votre dessin continuer parfaitement, même si la souris sort de la zone de travail.
- hmm, essayé d'utiliser de la toile.onselectstart dans mon semblable application de peinture, mais il ne se désactive la sélection lorsque le curseur de la souris est le curseur de la toile.
InformationsquelleAutor Simon Sarris
4

Essayer ce script, il serait de désactiver la sélection si le glissement est définie sur true. De cette façon, vous pouvez toujours sélectionner du texte lorsque vous n'êtes pas le dessin.
```
document.onselectstart = function( e ) { 
  if (dragging) { 
    e.preventDefault();
    return false;
  }
};
```
InformationsquelleAutor Sheepy

Vous devez vous connecter pour publier un commentaire.