如何防止文字在HTML5畫布外雙擊選擇？

Question

（在我嘗試過的每個瀏覽器中）雙擊HTML5畫布選擇緊隨畫布元素的任何文本。我寧願將點擊限制在畫布上。 （Nb：我不想完全禁用文本選擇（例如像this）：如果雙擊文本，應該選擇它。我只是不希望點擊從畫布上「泄漏」 ）

這可能嗎？

這是a simple page，它演示了這個問題。

Answer 1

首先讓我注意你的畫布沒有填充頁面的寬度，它只有100像素寬。寬度和高度畫布屬性始終解析爲像素，因此，就Canvas標籤而言，寫入width =「100％」僅表示100像素。

要回答你的問題，寫在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

試着把你的畫布對象放在之後所有其他的HTML。我遇到了這個問題，我所要做的就是將我的浮動CSS div放在代碼（包含在div中）的canvas標籤之前（上方）。

只是想我會寫這個以防萬一它幫助別人。