4

3 つの HTML5 キャンバス要素を取得しました。1 つは透明で、重複していない他の 2 つを完全に覆っています (その上に描画するものは重ね合わせる必要があるため、その z インデックスは最高でなければなりません)。

問題は、一番上の 1 つ ( overlay_area) が他の 2 つのイベントの受信を妨げていることです。最上位のイベントが受信される必要はないので、

  • 一番上のキャンバスがイベントを受け取るのを止める方法はありますか?
  • そうでない場合、イベントを下部のキャンバスに渡す方法はありますか?

このプロジェクトでは、jqueryではなく、hammer.js を使用する必要があります。

<canvas id="overlay_area"
        style="z-index: 8; position:absolute; left:0px; top:35px;"
        height="762px" width="968px">
        This text is displayed if your browser does not support HTML5 Canvas.
        </canvas>

    <canvas id="wave_area"
        style="z-index: 5;
        position:absolute;
        left:0px;
        top:35px;"
        height="762px" width="200px">
        This text is displayed if your browser does not support HTML5 Canvas.
        </canvas>

    <canvas id="edit_area"
        style="z-index: 5;
        position:absolute;
        left:200px;
        top:35px;"
        height="762px" width="768px">
        This text is displayed if your browser does not support HTML5 Canvas.
    </canvas>
4

2 に答える 2

2

フレデリックが彼の答えで指摘しているように、これを達成する方法はいくつかあります。要素でのマウス イベントを無視する別の方法は、次のスタイルを割り当てることです。

pointer-events:none;

適切にサポートされており、うまく機能します。

ライブデモ

だからあなたの場合、それは

<canvas id="overlay_area"
    style="z-index: 8; position:absolute; left:0px; top:35px; pointer-events:none;"
    height="762px" width="968px">
    This text is displayed if your browser does not support HTML5 Canvas.
    </canvas>
于 2012-10-22T21:05:14.980 に答える
1

<canvas>3つの要素を親要素にラップしてから、イベントを親にバブルアップさせ、そこで処理することができます。

オブジェクトのpageXプロパティとpageYプロパティを、要素のoffsetLeft 、 offsetTop 、offsetWidth 、 offsetHeightプロパティと組み合わせて使用​​すると、マウスイベントの座標を変換し、それらがトリガーされた可能性がある場合にトリガーされた場所を特定できます。下の要素。event<canvas>

于 2012-10-22T18:37:38.370 に答える