如何禁用选择HTML5画布元素

Question

我监听HTML5画布内的点击事件，它工作得很好。但是，当我单击图像上的任何位置时，浏览器会将其选中（就像点击页面时突出显示图像的方式一样）。我很好奇，如果有人知道如何禁用选择HTML元素，如画布。我不希望当有人点击画布时显示画布。

Answer 1

你可以尝试沿着这些应用的几个CSS规则：

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

正如迈克尔提到jQuery的disableTextSelect是值得一试。即使你最终没有使用它，研究源代码也许会提供一些见解。

Answer 2

我想用jQuery。 $('.noSelect').disableTextSelect();

Answer 3

你打算在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> 

Answer 4

只有最后的的CSS规则似乎做到这一点。其他规则一起工作（在Safari iOS5上），直到我添加了最后一个。

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

Answer 5

有点关系：

cursor: default; 

：如果问题是，光标变成选择图标（例如，在画布上拖动时），你可以通过这个CSS在画布上禁用或防止事件在mousedown处理程序中的默认行为：

event.preventDefault();