如何防止双击HTML5画布外的文本选择？

Question

（在我尝试的每个浏览器中）双击HTML5画布选择紧跟canvas元素后面的任何文本。我宁愿将点击次数限制在画布上。

（Nb：我不想完全禁用文本选择（例如像this）：如果双击它应该被选中的文本。我只是不希望点击“泄漏”来自画布。）

这可能吗？

以下a simple page演示了此问题。

Answer 1

首先请注意，您的画布没有填充页面的宽度，它只有100像素宽。宽度和高度画布属性总是解析为像素，因此写入宽度=“100％”只意味着100个像素，就Canvas标记而言。

要回答您的问题，请写入javasript：

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

将不再出现双击文字问题。

Answer 2

我遇到了一个非常类似的情况，我使用javascript启用了在页面上拖放元素的功能。

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

有关此实例的一个很好的示例，请参阅：http://www.dynamicdrive.com/dynamicindex9/noselect.htm

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

祝你好运！

Answer 3

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

以为我会写这个以防万一它可以帮助其他人。