css - Javascript なしでは HTML5 Canvas 領域を選択できないようにする

Question

私が作成しているアプリには、HTML5 キャンバスをバッキングとして使用するタブがあります (それらはクロムタブのように丸みを帯びており、境界線や従来の 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 を呼び出すことで解決しました。

score 3 · Accepted Answer

IE9 をサポートする必要がない場合は、実際にユーザー選択を使用できます (ブラウザーごとにプレフィックスが必要です: -ms-、-moz-、および -webkit-)。選択範囲がまだ表示されている理由は、考えているよりも高いレベルの要素が選択されている可能性があります。例：

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

「navigationTabs」に対して実行している場合は、「richUI」以上で試してください。

score 2 · Accepted Answer

設定によって異なりますが、試すことができますpointer-events— ただし、最新のブラウザーでのみサポートされています。

canvas { pointer-events: none; }

キャンバスレイヤー自体でマウスイベントを直接トラップすることを期待している場合、これは明らかに問題を引き起こします。

うーん。それは実際に、あなたが試すことができるさまざまなことへのマークアップに依存します。その一部を回答に投稿すると、役立つでしょう。イベントをブロックする問題を具体的に対象とする別の推測ですが、ondblclick他の手段による選択の発生を防ぐことはできません。

<body ondblclick="return false">

また、@ Katana314 の回答に関しては、キャンバス要素を直接ターゲットにするのではなく、キャンバス要素をラップする要素の選択を無効にする必要がある場合があります。次に例を示します。

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

そして、次を使用します。

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

それはうまくいくかもしれません。

2 に答える 2