如何防止在双击 HTML5 画布之外选择文本？答案

【问题标题】：How to prevent text select outside HTML5 canvas on double-click?如何防止在双击 HTML5 画布之外选择文本？
【发布时间】：2011-04-10 16:51:01
【问题描述】：

（在我尝试过的所有浏览器中）双击 HTML5 画布会选择紧跟在画布元素之后的任何文本。我希望将点击限制在画布上。

（注：我不想完全禁用文本选择（例如this）：如果您双击应该选择的文本。我只是不希望点击从画布。）

这可能吗？

这里是 a simple page，它演示了这个问题。

【问题讨论】：

【解决方案1】：

我遇到了一个非常相似的情况，我可以使用 javascript 在页面周围拖放元素。

要解决此问题，您可以捕获文本选择事件，如果您返回 false，则在捕获该事件时，将永远不会发生选择。

或者，如果您熟悉 jQuery 框架，可以在以下位置获得一个非常简单且有效的插件：http://chris-barr.com/entry/disable_text_selection_with_jquery/

祝你好运！

【讨论】：

【解决方案2】：

首先让我注意到你的画布没有填满页面的宽度，它只有 100 像素宽。宽度和高度画布属性总是解析为像素，因此对于 Canvas 标签而言，写 width="100%" 仅表示 100 像素。

要回答您的问题，请在 javasript 中编写：

//give your canvas an id, I used 'can'    
var canvas = document.getElementById('can');
canvas.onselectstart = function () { return false; }

不再出现双击文本问题。

【讨论】：

我爱你@simon。你刚刚解决了我的问题:)
只是为了把我的案子放在那里 - 将处理程序附加到画布上对我没有任何帮助。事实上，要解决您的问题，您需要将此处理程序附加到被选中的元素。在我的情况下，它是 div 中的一个 span 元素，在画布之外。希望这会有所帮助:)
八年后，这也解决了我在使用 SVG 时遇到的类似问题，直接应用于 SVG 元素。

【解决方案3】：

尝试将您的画布对象放在所有其他 HTML 之后的 div 中。我遇到了这个问题，我所要做的就是将我的浮动 CSS div 放在代码中的 canvas 标记之前（上方）（包含在一个 div 中）。

只是想我会写这个以防万一它帮助其他人。

【讨论】：