1

次の style="position:fixed;top:0;left:0;z-index:-1;" を使用して、html5 キャンバスをバックグラウンドに配置しました。

私のwindow.onload()では、canvas.addEventListener('mousemove', onMouseMove, false)のようにキャンバスにマウスイベントリスナーを追加していますが、残念ながら私のキャンバスはマウスイベントを受け取りません。イベントを z 軸に沿ってどのように伝播しますか? 外部ライブラリを使用せずにそれを行うことは可能ですか (存在する場合)?

検索してみましたが、これまでに関連するものは見つかりませんでした。

4

2 に答える 2

1

固定されていない要素から別の親を持つ固定された要素に mousemove イベントを「バブル」させたいですか? 自分でチェックしてトリガーする必要があると思います：

固定されていない要素のラッパーを作成します。これは、mousemove イベント リスナーも取得します。mousemove が固定要素上にある場合 (clientX と clientY を確認)、固定要素で mousemove イベントをトリガーします。

たとえば、firefox でテストした場合:

function onCanvasMouseMove(oEvent) {
    console.log(oEvent);
}

// wrapper mousemove handler: 
// if the mouse is over the canvas, trigger mousemove event on it.
function onWrapperMouseMove(oEvent) {
    if (
        oEvent.clientX <= oCanvas.offsetWidth
        && oEvent.clientY <= oCanvas.offsetHeight
    ) {
        oEvent.stopPropagation();
        var oNewEvent = document.createEvent("MouseEvents");
        oNewEvent.initMouseEvent("mousemove", true, true, window, 0, oEvent.screenX, oEvent.screenY, oEvent.clientX, oEvent.clientY, false, false, false, false, 0, null);
        oCanvas.dispatchEvent(oNewEvent);
    }
}

var oCanvas;

window.onload = function() {
    oCanvas = document.getElementById('canvas');
    oCanvas.addEventListener('mousemove', onCanvasMouseMove, false);
    // add mousemove listener to none-fixed wrapper
    var oWrapper = document.getElementById('wrapper');
    oWrapper.addEventListener('mousemove', onWrapperMouseMove, false);
};

この例も参照してください。

Ps: バブリングという言葉は適切ではありません。通常は、イベントを親要素にバブリングすることを意味します。

于 2012-06-03T12:00:54.250 に答える
0

オーバーレイ要素を に設定してみることができますがpointer-events: none、これは Firefox、Chrome、および Safari でのみ機能します。に到達する前に処理したい要素やマウス イベントがある場合、問題が発生する可能性もありますcanvas。

于 2012-06-03T16:59:06.247 に答える