Javascript 不一致的画布事件侦听器使用offsetTop

我有一个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:");}
            }

if（eventstate==“texta6get”）{
console.log（我的）；
如果（my>300&&my400&&my500&&my600&&my700&&my800&&my如果您可以使用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:");}
}

//为mousedown事件设置处理程序
$（“#canvas”）.mousedown（函数（e）{handleMouseDown（e）；}）；
//获取画布在页面上的位置，因为它不会更改
var canvasOffset=$（“#画布”）.offset（）；
var offsetX=canvasOffset.left；
var offsetY=canvasOffset.top；
//处理mousedown事件
功能手柄向下（e）{
mx=parseInt（e.clientX-offsetX）；
my=parseInt（e.clientY-offsetY）；
//把你的鼠标下的东西放在这里
如果（my>300&&my400&&my500&&my600&&my700&&my800&&myI遇到了同样的问题，在js Hi Zachrip中设置画布的宽度和高度，我尝试了你的提示，我用javascript设置了宽度和高度，并删除了CSS中对它的引用。它修复了顶部负数的问题。谢谢你的帮助。但是仍然有一个p以前的问题。当我进入画布时，有时它会重置坐标，例如，我单击我期望坐标为300的位置，它是，我单击稍微低一点的位置，我期望坐标为326，得到15。我不知道这是什么原因。我让你的代码工作了。它的响应比我的代码好得多，所以非常感谢你。不幸的是，我没有解决问题。但是我想我知道可能是什么原因造成的。问题是我正在使用一个y轴较长的画布，并且必须向下滚动来回答一些问题。当我滚动时，坐标开始出错。是否可以修改您的解决方案来处理此问题？我明白了…那么您还需要考虑r垂直滚动如下：my=parseInt（e.clientY-offsetY+$（“#canvas”）.scrollTop（））；