在没有 Javascript 的情况下使 HTML5 Canvas 区域无法选择答案

【问题标题】：Make HTML5 Canvas area unselectable without Javascript在没有 Javascript 的情况下使 HTML5 Canvas 区域无法选择
【发布时间】：2013-10-12 12:03:13
【问题描述】：

我正在制作的一个应用程序具有使用 HTML5 画布作为支持的选项卡（它们像 chrome 选项卡一样被舍入，这不能通过边框半径或传统 HTML 来完成）。但是，当有人双击选项卡周围的东西时，它会突出显示整个画布区域。

// i've tried:
canvas { outline: none; }

// and
canvas { -moz-user-select: none /* etc */ }

// to no avail.

我能在网上找到的唯一解决方案是使用 JS 和事件绑定每个该死的画布，例如：

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

然后我们必须进入解除绑定事件等，我的应用程序中到处都是这些选项卡。

幽默 CBroe：

还有问题：

pbebbl 通过在画布的父元素上调用 user-select: none 解决了这个问题。

【问题讨论】：

【解决方案1】：

如果您不需要支持 IE9，那么您确实可以使用 user-select（您需要为每个浏览器添加前缀：-ms-、-moz- 和 -webkit-）。选择仍然出现的原因可能是选择了比您认为的更高级别的元素。示例：

<body>
<div id="wrapper">
    <div id="content">
        <div id="richUI">
            <canvas id="navigationTabs">

如果您正在对“navigationTabs”进行操作，请尝试使用“richUI”或更高版本。

【讨论】：

嗯。在 Firefox 中（使用 firebug），我设置了canvas { -moz-user-select: none; }，但这并没有成功。为了验证画布是元素，我删除了它，实际上选项卡上没有突出显示。

【解决方案2】：

这取决于您的设置，但您可以尝试pointer-events——不过，它仅在较新的浏览器中受支持：

canvas { pointer-events: none; }

如果您希望直接在画布层本身上捕获任何鼠标事件，这显然会导致问题。

嗯。好吧，这实际上取决于您对可以尝试哪些不同事物的标记，如果您将其中一些内容发布到您的答案中，那将有所帮助。另一种猜测，这将专门针对阻止ondblclick 事件的问题——但这不会阻止通过其他方式发生选择。

<body ondblclick="return false">

另外关于@Katana314的回答，您可能需要禁用对包裹canvas元素的元素的选择，而不是直接定位canvas元素，例如：

<div class="canvas-wrapper">
  <canvas />
</div>

然后使用：

.canvas-wrapper { -moz-user-select: none; }

这可能行得通。

【讨论】：

这让我兴奋了一秒钟，但它没有成功:(
看，当我双击它附近的一个元素时，它会突出显示，就像这样：双击 SO 上的一个段落附近，整个段落都会突出显示。相同的概念。
@dc2 啊，好吧，真可惜，这只是一个猜测:) - 我已经更新了我的答案。实际上我提到的.canvas-wrapper 方法也可能适用于pointer-event。至少无论如何都值得一试。
为您的努力+1。让我试试这些东西 - 我会告诉你的。
你做到了——.canvas-wrapper { -moz-user-select: none; } 成功了。非常感谢！