'X ve y koordinatları (tuval öğe göreceli) döndürecektir tuval öğesi için bir tıklatın olay işleyicisi eklemek için en kolay yolu nedir?

Hayır eski bir tarayıcı gerekli, Safari, Opera ve Firefox uyumluluk yapacak.

Tuval her zaman tüm sayfaya göre tarz değil bu yana, canvas.offsetLeft/Top her zaman ihtiyacın olan şey geri gelmez. div bir elemanı position: relative tarzında bir tuval içeren uygulamalı gibi bir şey olabilir offsetParent unsuru, göreli olarak bu piksel sayısını döndürür. Bu hesap üzerinden offsetParents zinciri, tuval öğesi kendisi ile başlayan bir döngü. Bu kod mükemmel benim için çalışıyor, Firefox ve Safari'de denedim ama tüm çalışması gerekir.

function relMouseCoords(event){
    var totalOffsetX = 0;
    var totalOffsetY = 0;
    var canvasX = 0;
    var canvasY = 0;
    var currentElement = this;

    do{
        totalOffsetX  = currentElement.offsetLeft - currentElement.scrollLeft;
        totalOffsetY  = currentElement.offsetTop - currentElement.scrollTop;
    }
    while(currentElement = currentElement.offsetParent)

    canvasX = event.pageX - totalOffsetX;
    canvasY = event.pageY - totalOffsetY;

    return {x:canvasX, y:canvasY}
}
HTMLCanvasElement.prototype.relMouseCoords = relMouseCoords;

Son satırı şeyleri fare koordinatları canvas öğesine göre almak için uygun yapar. Yararlı koordinatlarını elde etmek için gerekli olan şeydir

coords = canvas.relMouseCoords(event);
canvasX = coords.x;
canvasY = coords.y;