当我使用时使用以下Javascript代码
function init() {
var gameCanvas = document.getElementById("gameCanvas");
document.getElementById("canvasWidth").innerHTML = gameCanvas.width;
gameCanvas.addEventListener("mousemove", handleMouseEvent);
}
function handleMouseEvent(mouseEvent) {
document.getElementById("mouseX").innerHTML = mouseEvent.offsetX;;
}
使用此html
<body>
<div id="mainScreen">
<div id="topScreen">
<h1 id="canvasWidth">Score:</h1>
<h1 id="mouseX">0</h1>
</div>
<div id="gameScreen">
<canvas id="gameCanvas" onclick="init()">
</canvas>
</div>
</div>
</body>
画布宽度显示为300,而留在画布中的mouseX远远超过300.我已为其链接了截屏。它在Chrome中运行良好,但事实并非如此 在Internet Explorer和Windows应用商店中工作。
屏幕截图:http://dc365.4shared.com/download/ajE0f2XQ?tsid=20130615-014658-676a63ae
指针位于右边缘附近,但没有截屏,这就是我标记它的原因。顶部的第一个数字是画布宽度,第二个数字显示指针offsetX。
为什么会发生这种情况,如何纠正?
更新(添加CSS代码)
Css代码
#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;
}
答案 0 :(得分:5)
看看之间的区别 OFFSETX, layerX, pageX属性, clientX, screenX属性 这可能很有用 MouseEventsProperties .... 不同浏览器支持不同属性 在了解它们之后,您将了解如何使用这些属性,以便您的应用程序可以在所有平台上运行
好的,这是一个代码(一个非常简化的版本),我在chrome,safari,firefox甚至iPad等触摸设备上编写和测试过。 Code将事件对象作为参数,它将返回相对于画布具有X和Y的coord对象。 希望这会有所帮助......
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;
}
}