我得到的mouseEvent.offsetX远大于实际的画布大小

Question

我得到的mouseEvent.offsetX远大于实际的画布大小

当我使用时使用以下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;;
}

Run Code Online (Sandbox Code Playgroud)

用这个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>

Run Code Online (Sandbox Code Playgroud)

画布宽度显示为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;
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

sum*_*mdi 5

See the difference between offsetX, layerX, pageX, clientX, screenX Properties This might be useful MouseEventsProperties.... Different browsers support different properties After learning about them you will get to know how to use these property so your application Works on all platforms

Okay so here is a code( a very simplified version) which I wrote and tested on the chrome,safari,firefox and even touch devices like iPad. The Code takes the event object as the argument and it will return you the coord object having the X and Y with respect to the canvas. Hope this will help...

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;
}
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，5 月前
查看次数：	5168 次
最近记录：	12 年，5 月前