3

我正在制作的一个应用程序具有使用 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; }

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

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

更新

为了幽默 CBroe:

在此处输入图像描述

和问题:

在此处输入图像描述

解决了

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

4

2 回答 2

3

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

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

如果您正在对“navigationTabs”执行此操作,请尝试使用“richUI”或更高版本。

于 2013-10-12T00:19:35.197 回答
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; }

这可能会奏效。

于 2013-10-12T00:40:59.973 回答