使用jquery将单击处理程序附加到画布元素_Jquery_Canvas_Click

使用jquery将单击处理程序附加到画布元素

jquery canvas

使用jquery将单击处理程序附加到画布元素,jquery,canvas,click,Jquery,Canvas,Click,我试图在画布上制作4个按钮，但我似乎无法连接。为了测试按钮本身是否工作，我只需设置“分数”，然后重新绘制画布以显示新分数，但这不起作用。示例按钮如下所示： var blueButton = new Object(); blueButton.x = w/2; blueButton.y = h/3+30; blueButton.width = w/2-10; blueButton.height = h/3; blueButton.color = "blue"; 用于创建单击处理程序的jquery如

我试图在画布上制作4个按钮，但我似乎无法连接。为了测试按钮本身是否工作，我只需设置“分数”，然后重新绘制画布以显示新分数，但这不起作用。示例按钮如下所示：

var blueButton = new Object();
blueButton.x = w/2;
blueButton.y = h/3+30;
blueButton.width = w/2-10;
blueButton.height = h/3;
blueButton.color = "blue";

用于创建单击处理程序的jquery如下所示：

//setup the click handler for the elements on the canvas
$("#canvas")[0].click(function(eventObject){
    mouseX = eventObject.pageX - this.offsetLeft;
    mouseY = eventObject.pageY - this.offsetTop;

    if(isInButton(greenButton, mouseX, mouseY)){
        score = 0;
        drawGameBoard();
    } else if(isInButton(redButton, mouseX, mouseY)){
        score = 1;
        drawGameBoard();
    } else if(isInButton(yellowButton, mouseX, mouseY)){
        score = 2;
        drawGameBoard();
    } else if(isInButton(blueButton, mouseX, mouseY)){
        score = 3;
        drawGameBoard();
    }
})

检测按钮中是否有点击的javascript如下：

function isInButton(buttonObj, mouseX, mouseY){
    if(((mouseX > buttonObj.x) && (mouseX < (buttonObj.x + buttonObj.width))) && ((mouseY > buttonObj.y) && (mouseY < (buttonObj.y + buttonObj.height))))
        return true;
    else
        return false;
}

函数isInButton（按钮、鼠标、鼠标）{
如果（（鼠标>按钮x）和（（鼠标<（按钮x+按钮宽度））&（（鼠标>按钮y）和（（鼠标<（按钮y+按钮高度）））
返回true；
其他的
返回false；
}

有人知道为什么我的点击没有注册吗

编辑：这是标记。我不相信在没有[0]的情况下获取canvas元素是可行的

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title>Simon Game</title>
</head>
<body>
    <h1> Simon </h1>
    <p> This is the simple memory game simon.<br>Mimic the pattern the computer creates until you can't remember what is next.</p>
    <canvas id="canvas" width="500" height="500"></canvas>

</body>
</html>


西蒙游戏
西蒙
这是一个简单的记忆游戏simon。
模仿计算机创建的模式，直到你记不起下一步是什么

研究了一个小时后，我终于明白了这个问题

    $("#canvas")[0].whateverfollowsthis

返回实际的DOM元素。这意味着由它创建的变量实际上不能与jquery函数（如.click和.offset）一起使用

 $("#canvas").whateverfollowsthis

允许您使用jquery函数

正确的代码如下：

$("#canvas").click(function(e){
    mouseX = e.pageX - $("#canvas").offset().left;
    mouseY = e.pageY - $("#canvas").offset().top;

    if(isInButton(greenButton, mouseX, mouseY)){
        score = 0;
        clickTile(0);
    } else if(isInButton(redButton, mouseX, mouseY)){
        score = 1;
        clickTile(1);
    } else if(isInButton(yellowButton, mouseX, mouseY)){
        score = 2;
        clickTile(2);
    } else if(isInButton(blueButton, mouseX, mouseY)){
        score = 3;
        clickTile(3);
    }
})

在研究这个问题整整一个小时后，我终于明白了

    $("#canvas")[0].whateverfollowsthis

返回实际的DOM元素。这意味着由它创建的变量实际上不能与jquery函数（如.click和.offset）一起使用

 $("#canvas").whateverfollowsthis

允许您使用jquery函数

正确的代码如下：

$("#canvas").click(function(e){
    mouseX = e.pageX - $("#canvas").offset().left;
    mouseY = e.pageY - $("#canvas").offset().top;

    if(isInButton(greenButton, mouseX, mouseY)){
        score = 0;
        clickTile(0);
    } else if(isInButton(redButton, mouseX, mouseY)){
        score = 1;
        clickTile(1);
    } else if(isInButton(yellowButton, mouseX, mouseY)){
        score = 2;
        clickTile(2);
    } else if(isInButton(blueButton, mouseX, mouseY)){
        score = 3;
        clickTile(3);
    }
})

这是在

准备就绪的中吗？呃，事实上，为什么你有$（“#画布”）[0]
？是否有一组具有相同ID的元素？请张贴您的标记。是的，这是所有的准备功能的文件（这是正确的设置）。我认为您需要[0]，因为没有它它就无法工作。这是在就绪
中吗？呃，事实上，为什么你有$（“#画布”）[0]
？是否有一组具有相同ID的元素？请张贴您的标记。是的，这是所有的准备功能的文件（这是正确的设置）。我认为您需要[0]，因为没有它就无法工作。