如何禁用对 html5 画布元素的选择答案

【问题标题】：How to disable select for html5 canvas element如何禁用对 html5 画布元素的选择
【发布时间】：2011-08-13 09:10:19
【问题描述】：

我在 html5 画布中监听点击事件，它工作得很好。但是，当我单击图像上的任意位置时，浏览器会突出显示它，就像它被选中一样（类似于单击页面时图像看起来会突出显示的方式）。我很好奇是否有人知道如何禁用选择 html 元素（例如画布）。我不希望画布在有人单击时显示为轮廓。

【问题讨论】：

标签： css html select canvas

【解决方案1】：

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

【讨论】：

【解决方案2】：

您可以尝试应用一些 CSS 规则：

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

正如 Michael 提到的，jQuery 的 disableTextSelect 值得一试。即使您最终没有使用它，研究其来源也可能会有所启发。

【讨论】：

【解决方案3】：

似乎只有最后一个 CSS 规则可以做到这一点。在我添加最后一条之前，其他规则一起不起作用（在 Safari iOS5 上）。

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

【讨论】：

【解决方案4】：

我会使用jQuery.$('.noSelect').disableTextSelect();

【讨论】：

【解决方案5】：

有点相关：如果问题是光标变成了选择图标（例如，在画布上拖动时），您可以通过画布上的这个 CSS 来禁用它：

cursor: default;

或在 mousedown 处理程序中阻止事件的默认行为：

event.preventDefault();

【讨论】：