Как добавить функцию щелчка к изображению jQuery

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

Я не думаю, что вы можете прослушивать события из изображений, которые нарисованный на холсте. Поэтому я думаю, что вы можете прослушивать события кликов на документе или просто на холсте, а затем проверить, произошел ли щелчок на области холста, занятой кнопкой.

$('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 
    } 
}); 

Вы можете использовать .offset() функции JQuery, чтобы получить верхнее и левое смещение элемента холста.

Answer 2

Вобще:

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

Answer 3

Использование .on() method на динамически созданный HTML

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