没有Javascript,HTML5 Canvas区域无法选择

时间:2013-10-12 00:12:48

标签: html css html5 canvas

我正在制作的应用程序包含使用HTML5画布作为支持的选项卡(它们像chrome选项卡一样是圆形的,无法通过边框半径或传统HTML完成)。但是,当有人双击选项卡周围的内容时,它会突出显示整个画布区域。

// i've tried:
canvas { outline: none; }

// and
canvas { -moz-user-select: none /* etc */ }

// to no avail.

我能在网上找到的唯一解决方案是使用JS和事件绑定每个该死的画布,例如:

canvas.onselectstart = function () { return false; }

然后我们必须进入解除绑定的事件等等。我在我的应用程序中都有这些选项卡。

有没有一个解决方案,所以我不必进入这个?

更新

幽默克罗伊:

enter image description here

和问题:

enter image description here

解决

pbebbl通过在画布的父元素上调用user-select:none来解决它。

2 个答案:

答案 0 :(得分:3)

如果您不需要支持IE9,那么您确实可以使用用户选择(您需要为每个浏览器添加前缀:-ms - , - moz-和-webkit-)。 选择仍然出现的原因可能是选择了比您想象的更高级别的元素。例如:

<body>
<div id="wrapper">
    <div id="content">
        <div id="richUI">
            <canvas id="navigationTabs">

如果您正在使用“navigationTabs”,请尝试使用“richUI” - 或更高版本。

答案 1 :(得分:2)

这取决于您的设置,但您可以尝试pointer-events - 它仅在最近的浏览器中受支持:

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

canvas { pointer-events: none; }

显然,如果您希望直接在画布层上捕获任何鼠标事件,这将导致问题。

更新

嗯。那么它真的取决于你的标记,你可以尝试不同的东西,如果你在答案中发布了一些它会有所帮助。另一个猜测,它将专门针对阻止ondblclick事件的问题 - 但不会阻止通过其他方式发生的选择。

<body ondblclick="return false">

关于@ Katana314的答案,您可能需要禁用包装canvas元素的元素的选择,而不是直接定位canvas元素,例如:

<div class="canvas-wrapper">
  <canvas />
</div>

然后使用:

.canvas-wrapper { -moz-user-select: none; }

这可能有用。