Question

我在画布上显示了一个图像，我正在尝试向其添加一个点击功能，以便它触发一个事件。但是，.click()似乎不起作用。我可以使用其他功能吗？

jQuery：

function homeScreen() 
{       
    var backImage = new Image();
    var playButton = new Image();
    backImage.onload = function() 
    {       
        context.drawImage(backImage, 0, 0);
        context.drawImage(playButton, 400, 600);                
    };
    backImage.src="images/homeBackground.jpg";
    playButton.src="images/play.png";

    $(playButton).click(function() {
        alert("Hey");
    });
}

Answer 1

只是做：

playButton.onclick = function() {
    //func stuff
}

Answer 2

我认为您不能从画布上绘制的图像中侦听事件。所以我认为你可以在文档上或在画布上监听点击事件，然后检查按钮所占据的画布区域是否发生了点击。

$('canvas').on('click', function(e) {
  if (e.pageX >= leftEdgeOfButton && e.pageX <= rightEdgeOfButton
        && e.pageY >= topEdgeOfButton && e.pageY <= bottomEdgeOfButton) {
    // handle click event
  }
});

至于按钮边缘的位置，我很确定你可以计算出这些值：左边和上边可能与你用来定义图像绘制位置的坐标值相同，右侧/底部只是左侧或右侧边缘加上按钮的宽度或高度。

如果画布与整个屏幕的大小不同，您可以将画布的左上角和上边距偏移添加到e.pageX和e.pageY进行制作和调整。

$('canvas').on('click', function(e) {
  if (e.pageX + leftOffsetOfCanvas >= leftEdgeOfButton 
        && e.pageX + leftOffsetOfCanvas <= rightEdgeOfButton
        && e.pageY + leftOffsetOfCanvas >= topEdgeOfButton 
        && e.pageY + leftOffsetOfCanvas <= bottomEdgeOfButton) {
    // handle click event
  }
});

您可以使用jQuery的.offset()函数来获取canvas元素的顶部和左侧偏移。

Answer 3

在动态创建的html

上使用.on() method

$(playButton).on("click",function() {
        alert("Hey");
    });

如何将单击函数附加到jQuery图像

3 个答案: