mouseEvent.offsetX gerçek tuval boyutu

Question

çok daha büyüktür Tuvalde kalan mouseX 300'ün ötesine geçiyor. Bunun için bir ekran görüntüsü bağladım. Chrome'da iyi çalışıyor ancak Internet Explorer'da ve Windows mağaza uygulamalarında çalışmıyor.

Ekran Görüntüsü: i işaretlemiş yüzden, http://dc365.4shared.com/download/ajE0f2XQ?tsid=20130615-014658-676a63ae

işaretçi bir yere sağ kenara yakın ama ekran görüntüsünde geldi vermedi. Üstteki ilk sayı, tuval genişliği ve ikincisi işaretçi offsetX'i gösterir.

Bu neden oluyor, nasıl düzeltilir?

---

Güncelleme Eklendi (CSS kodu)

Css kodu

#mainScreen { 
    display: -ms-grid; 
    -ms-grid-columns: 30px 1fr 30px; 
    -ms-grid-rows: 30px 100px 20px 1fr 30px; 
    height:inherit; 
} 

#topScreen { 
    display: -ms-grid; 
    -ms-grid-column: 2; 
    -ms-grid-row: 2; 
    -ms-grid-columns: 30px 150px 30px 60px 100px 1fr 30px; 
    -ms-grid-rows: 20px 1fr 20px; 
} 

#canvasWidth { 
    display: -ms-grid; 
    -ms-grid-row: 2; 
    -ms-grid-column: 2; 
} 

#mouseX { 
    display: -ms-grid; 
    -ms-grid-column: 4; 
    -ms-grid-row: 2; 
} 

#gameScreen { 
    display: -ms-grid; 
    -ms-grid-column: 2; 
    -ms-grid-row: 4; 
    -ms-grid-rows:1fr; 
    -ms-grid-columns: 1fr; 
    height:inherit; 
    width:inherit; 
} 
#gameCanvas { 
    height:inherit; 
    width:inherit; 
    background-color:white; 
    -ms-grid-column: 1; 
    -ms-grid-row: 1; 
} 

Answer 1

offsetX, layerX, PageX, clientX, screenX Özellikleri arasındaki farkı görün Bu yararlı olabilir MouseEventsProperties .... Farklı tarayıcılar başvurunuzun bir kod (çok basitleştirilmiş versiyonu) bu yüzden burada tüm platformlarda

Tamam Works yani bu özelliğini nasıl kullanılacağını bilmek alacak da öğrenerek sonra farklı özellikler destekleyen krom, safari, firefox ve hatta iPad gibi cihazlara yazdığım ve test ettiğim. Kod, olay nesnesini argüman olarak alır ve size tuvale göre X ve Y'ye sahip olan koordinat nesnesini döndürür. Bu yardımcı olacaktır Umut ... Burada yardım

containerX = document.getElementById('container').offsetLeft; 
containerY = document.getElementById('container').offsetTop; 
//here container is the id of my canvas basically the above two lines are global 
// in my code 

function getX_Y(evt){ 
var coord={ 
    X: null, 
    Y: null 
} 
var isTouchSupported = 'ontouchstart' in window; 
if(isTouchSupported){      // for touch devices 
    coord.X = evt.clientX-containerX; 
    coord.Y = evt.clientY-containerY; 
    return coord; 
} 

else if(evt.offsetX || evt.offsetX == 0){ //for webkit browser like safari and chrome 
    coord.X = evt.offsetX; 
    coord.Y = evt.offsetY; 
    return coord; 
} 

else if(evt.layerX || evt.layerX == 0){  // for mozilla firefox 
    coord.X = evt.layerX; 
    coord.Y = evt.layerY; 
    return coord; 
} 
}