如何禁用html5 canvas元素的select

I listen for click events inside an html5 canvas and it works just fine. However, when I click anywhere on the image the browser highlights it as if it were selected (similar to how an image might look highlighted if clicked on a page). I was curious if anyone knew how to disable selecting of html elements such as canvas. I don't want the canvas to appear outlined when someone clicks it.

我在html5画布中监听点击事件,它运行得很好。但是,当我单击图像上的任意位置时,浏览器会将其高亮显示为选中它(类似于在页面上单击时图像的外观如何突出显示)。如果有人知道如何禁用选择画布等html元素,我很好奇。当有人点击它时,我不希望画布显示出轮廓。

5 个解决方案

#1

You could try applying a few CSS rules along these:

您可以尝试应用以下几个CSS规则:

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

As Michael mentioned jQuery's disableTextSelect is worth checking out. Even if you don't end up using it, studying the source might give some insight.

正如迈克尔提到的,jQuery的disableTextSelect值得一试。即使您最终没有使用它,研究源可能会提供一些见解。

#2

Going on bebraw, go wild with CSS styles and add this in the head:

继续用bebraw,疯狂地使用CSS样式并将其添加到头部:

<style type="text/css">
    canvas {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        outline: none;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* mobile webkit */
    }   
</style>

#3

Only the last of those css rules seemed to do it. The other rules together didn't work (on Safari iOS5) until I added the last one.

只有最后一个css规则似乎这样做。其他规则一起不起作用(在Safari iOS5上),直到我添加最后一个。

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

#4

I'd use jQuery.$('.noSelect').disableTextSelect();

我使用jQuery。$('。noSelect')。disableTextSelect();

#5

Somewhat related: if the problem is that the cursor becomes the selection icon (eg. when dragging on the canvas), you can disable that by either this CSS on the canvas:

有点相关:如果问题是光标成为选择图标(例如,在画布上拖动时),您可以通过画布上的这个CSS禁用它:

cursor: default;

or preventing the event's default behavior in the mousedown handler:

或者在mousedown处理程序中阻止事件的默认行为:

event.preventDefault();

#1