如何在jQuery图像上添加点击功能

我在画布上显示了一个图像，我正在尝试向它添加一个点击功能，以便关闭一个事件。但是，.click()似乎不起作用。有我可以使用的另一个功能吗？如何在jQuery图像上添加点击功能

的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"); 
    }); 
}

来源

2014-01-11 Andrew

无法将事件侦听器附加到画布区域。将它附加到画布元素，并根据鼠标事件的坐标选择一个动作。或者，将按钮作为元素放置在画布顶部，并向它们添加点击处理程序。 –

什么是“jQuery图像”？ – nnnnnn

@nnnnnn这是一个jQuery图像：http://brand.jquery.org/resources/jquery-mark-dark.gif –

我不认为你可以从事件是图像听绘制在画布上。所以我认为你可以在文档上或者在画布上监听点击事件，然后检查点击是否出现在按钮占用的画布区域。

$('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元素的顶部和左侧偏移。

来源

2014-01-12 00:40:01

只要做到：

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

来源

2014-01-11 23:37:17 tymeJV

只能绘制到画布而不添加到DOM的图像是可点击的？虽然我不知道我无法相信它。 –

如果'$（playButton）.click（...'没有？ – nnnnnn

使用.on() method上动态创建的HTML

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

来源

2014-01-11 23:39:17

'$（...）。click（callback）'和'$（...）。on（'click' ，'callback'）完全一样 –

@ t.niese var playButton = new Image（）; playButton是动态创建的 –

你使用'.on（）'显示的代码完全等同于'.click（） '.click（）'在动态添加的元素上工作_if_'.click（）'被称为_after_元素被添加后，但是整个动态/静态问题在这里不是问题： OP正在尝试处理点击画布元素上的内容，这与处理img元素上的点击不一样。 – nnnnnn

如何在jQuery图像上添加点击功能

回答

相关问题