Question

我有一个HTML5网页游戏的事件监听器，这是一个测验，但是我很难让事件监听器获得应该预期的实际坐标。

使用javascript控制台，我发现它获得的坐标经常是错误的。

编辑：我想我知道问题发生的原因，但不知道如何解决。我使用的是长y轴的画布，必须向下滚动才能回答一些问题。当我滚动时，坐标开始出错。有办法解决这个问题吗？

这是我的事件监听器。请帮我解决这个问题。

canvas.addEventListener('click',ProcessClick,false);
function ProcessClick(ev) {
    my=ev.y-canvas.offsetTop;
    if(ev.y == undefined){
        my = ev.pageY - canvas.offsetTop; 
        }

我如何使用坐标的示例 -

if(eventstate == 'texta6get'){
            console.log(my);
            if(my>300 && my<390){GetAnswer(1);console.log("Answer1 clicked:");}
            if(my>400 && my<490){GetAnswer(2);console.log("Answer2 clicked:");}
            if(my>500 && my<590){GetAnswer(3);console.log("Answer3 clicked:");}
            if(my>600 && my<690){GetAnswer(4);console.log("Answer4 clicked:");}
            if(my>700 && my<790){GetAnswer(5);console.log("Answer5 clicked:");}
            if(my>800 && my<890){GetAnswer(6);console.log("Answer6 clicked:");}
            }

Answer 1

如果你可以使用jQuery，下面的代码可以得到一致的结果。

// set up a handler for mousedown events
$("#canvas").mousedown(function(e){handleMouseDown(e);});


// get the position of the canvas on the page since it doesn't change
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;


// handle mousedown events
function handleMouseDown(e){
    mx=parseInt(e.clientX-offsetX);
    my=parseInt(e.clientY-offsetY);

    // Put your mousedown stuff here
    if(my>300 && my<390){GetAnswer(1);console.log("Answer1 clicked:");}
    if(my>400 && my<490){GetAnswer(2);console.log("Answer2 clicked:");}
    if(my>500 && my<590){GetAnswer(3);console.log("Answer3 clicked:");}
    if(my>600 && my<690){GetAnswer(4);console.log("Answer4 clicked:");}
    if(my>700 && my<790){GetAnswer(5);console.log("Answer5 clicked:");}
    if(my>800 && my<890){GetAnswer(6);console.log("Answer6 clicked:");}
}

不一致的Canvas Event Listener使用offsetTop

1 个答案: