在画布外绘图时，防止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画布（例如，设置焦点在页面上），则可以取消设置这些规则。 使用这种方法，人们仍然可以选择网页的一部分，但是当他们在画布中时，他们不会选择任何东西。