防止Chrome在畫布外繪製時選擇所有內容？

Question

我正在製作一個使用canvas的小繪畫應用程序，並且在畫布中繪製一切都很好，但只要用戶離開畫布的邊界，頁面上的所有內容都將被選中。

這不會發生在Firefox中。我已經向幾個人展示了這款應用程序，他們中的每一個人都提到了它的煩人程度。我讀過，顯然我可以把

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

在頁面上的每一個div，但似乎是矯枉過正。此外，我的用戶可以選擇頁面上的東西。它在Firefox中完美運行，在離開畫布時不會選擇任何內容，但在Chrome中由於某些原因在畫布中繪製時，光標在繪圖時變爲選擇光標，並且在用鼠標左鍵離開畫布時仍然按住所有內容。

這是可以解決的嗎？

Answer 1

您可以使用星號* CSS選擇器這樣的：

* { 
    -moz-user-select: none; 
    -webkit-user-select: none; 
    user-select: none; 
} 

另一種可能的解決辦法是將CSS規則適用於body元素，可能會工作得很好，但它是未經測試。

您可以在用戶關注canvas元素時設置這些CSS規則，並在用戶blurs畫布（例如，將焦點置於頁面上）時取消設置。 使用這種方法，人們仍然可以選擇網頁的某些部分，但他們在畫布中時不會選擇任何內容。