3

私はJSが初めてです。jQuery を使用していませんが、質問があります。ページに可変数のキャンバスを作成しました。すべてに次のようなイベントリスナーがあります。

            for (i=0; i<numberOfCanvases; i++){
                var canv =  document.createElement("canvas");
                canv.addEventListener('click', clickReporter, false);
                document.body.appendChild(canv); }

リスナー関数 clickReporter の場合:

        function clickReporter(e){...}

この関数を使用して、キャンバスに対するクリックイベントのマウス位置を教えようとしています:

function getMousePos(canvas, evt){
// get canvas position
var obj = canvas;
var top = 0;
var left = 0;
while (obj && obj.tagName != 'BODY') {
    top += obj.offsetTop;
    left += obj.offsetLeft;
    obj = obj.offsetParent;
}
// return relative mouse position
var mouseX = evt.clientX - left + window.pageXOffset;
var mouseY = evt.clientY - top + window.pageYOffset;
return {
    x: mouseX,
    y: mouseY
};

}

このチュートリアルから見つけたもの: http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/

問題は、キャンバスが 1 つしかないと仮定していることです。現在、Web ページに配置されているキャンバスのリストを持っていますが、clickReporter() 関数だけを考えると、どのキャンバスを簡単に判断できるのか疑問に思っていました。キャンバスが選択されましたか? evt.getCanvas() や evt.getParentCanvas() のような関数?

イベントが発生したとき（多くのキャンバスの1つをマウスでクリックすると、そのキャンバスのみに対してその場所でアクションを作成したい）

4

2 に答える 2

2 
function clickReporter(e){
    console.log( this ); // in a eventListener , this point to the element fire the event
    console.log( e.target ); // in fireFox and webkit, e.target point to the element fire the event
}
于 2012-05-09T01:00:40.173 に答える
1

evt.target ( event.target ) が機能すると思います。

于 2012-05-09T00:55:26.630 に答える