html5 – 防止意外选择/拖动高亮

我有一个绘图应用程序使用html5画布.当用户正在绘制和笔滑出画布区域时,chrome会以浅蓝色或黄色的方式在页面上显示html元素.

这对绘画的经验是破坏性的.有没有办法防止这种突出发生？

事件处理和绘图代码是基于这个帖子：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.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,upper.canvas.width,upper.canvas.height) ;
        drawstroke(upper) ;
    }}) ;

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

如果您在画布标签上方添加了一些h1标签,然后在画布上绘制,拖动到边框外,您将看到一个蓝色的高亮.有办法防止这种行为吗？

解决方法

将以下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; };

但是它也可能是应用程序的整合：如果您在jsfiddle中选择一个大的linewidth并且移动鼠标非常缓慢,您可以在草图中看到一些丑陋的效果(块).始终检查距离onmousemove(拖动)坐标到最后坐标的距离不要太小.例如,如果距离超过线束的1/6,则仅将坐标添加到草图.

html5 – 防止意外选择/拖动高亮

解决方法

相关文章