How do I append a click function to an jQuery Image

Question

I displayed an image onto the canvas, and I'm trying to add a click function to it so that it fires off an event. However, .click() doesn't seem to work. Is there another function I can use?

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

It's not possible to attach an event listener to a canvas region. Attach it to the canvas element, and pick an action depending on coordinates of the mouse event. Or instead put the buttons as <img> elements on top of the canvas and add click handlers to them. — Alexey Lebedev
– Alexey Lebedev, Commented Jan 11, 2014 at 23:46
@nnnnnn this is a jQuery image: brand.jquery.org/resources/jquery-mark-dark.gif — Alexey Lebedev
– Alexey Lebedev, Commented Jan 12, 2014 at 10:51

Arnelle Balane · Accepted Answer · 2014-01-12 00:45:19Z

I don't think you can listen for events from images that are drawn on the canvas. So what I think is that you can listen for click events on the document or just on the canvas and then check if the click occured on the area of the canvas occupied by the button.

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

As for the position of the edges of the button, I'm pretty sure you can calculate those values: the left and top edges are probably just the same as the coordinate values you used to define where the image should be drawn, and the right/bottom are just the left or right edges plus the width or height of the button.

If the canvas is not of the same size with the whole screen, you can add the left and top offset of the canvas to the e.pageX and e.pageY to make and adjustment.

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

You can use jQuery's .offset() function to get the top and left offsets of the canvas element.

tymeJV · Accepted Answer · 2014-01-11 23:37:17Z

1

Just do:

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

answered Jan 11, 2014 at 23:37

tymeJV

105k14 gold badges165 silver badges158 bronze badges

2 Comments

t.niese Over a year ago

An image that is only drawn to a canvas and not added to dom is clickable? While I don't know I can't believe it.

nnnnnn Over a year ago

Why would that work if $(playButton).click(... didn't?

Nick · Accepted Answer · 2014-01-11 23:39:17Z

0

Use .on() method on dynamically created html

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

answered Jan 11, 2014 at 23:39

Nick

4,2181 gold badge21 silver badges30 bronze badges

4 Comments

t.niese Over a year ago

$(...).click(callback ) and $(...).on('click', callback) is exactly the same thing.

Nick Over a year ago

@t.niese var playButton = new Image(); playButton is dynamically created

nnnnnn Over a year ago

The code you have shown with .on() is exactly equivalent to the .click() code shown in the question. Note that .click() works on dynamically added elements if .click() is called after the elements are added. But the whole dynamic/static issue isn't the problem here: the OP is trying to handle clicks on what was drawn on a part of a canvas element, which is not the same thing as handling clicks on an img element.

t.niese Over a year ago

Take a look at jQuery:event-alias.js line:1, click just forwards to on. Whether you need delegate or direct binding is also not about if the element is created dynamically, but if you are able to get a reference to it at the time you want to add an event listener to it.

Collectives™ on Stack Overflow

How do I append a click function to an jQuery Image

3 Answers 3

Comments

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related