Comment ajouter un gestionnaire d'événements simple onClick à un élément canvas?

lorsque vous dessinez un élément canvas , vous dessinez simplement une image en mode mode immédiat .

les éléments (formes, lignes, images) qui sont dessinés n'ont pas de représentation en dehors des pixels qu'ils utilisent et de leur couleur.

par conséquent, pour obtenir un cliquez sur événement sur un canvas élément (forme), vous devez capturer cliquez les événements sur l'élément canvas HTML et utilisez quelques mathématiques pour déterminer quel élément a été cliqué, à condition que vous stockez la largeur/hauteur et le décalage x/Y.

pour ajouter un click à votre élément canvas , utilisez...

canvas.addEventListener('click', function() { }, false);

pour déterminer quel élément a été cliqué...

var elem = document.getElementById('myCanvas'),
    elemLeft = elem.offsetLeft,
    elemTop = elem.offsetTop,
    context = elem.getContext('2d'),
    elements = [];

// Add event listener for `click` events.
elem.addEventListener('click', function(event) {
    var x = event.pageX - elemLeft,
        y = event.pageY - elemTop;

    // Collision detection between clicked offset and element.
    elements.forEach(function(element) {
        if (y > element.top && y < element.top + element.height 
            && x > element.left && x < element.left + element.width) {
            alert('clicked an element');
        }
    });

}, false);

// Add element.
elements.push({
    colour: '#05EFFF',
    width: 150,
    height: 100,
    top: 20,
    left: 15
});

// Render elements.
elements.forEach(function(element) {
    context.fillStyle = element.colour;
    context.fillRect(element.left, element.top, element.width, element.height);
});​

jsFiddle .

ce code attache un événement click à l'élément canvas , puis pousse une forme (appelée element dans mon code) à un tableau elements . Vous pouvez ajouter autant que vous voulez ici.

le but de créer un tableau d'objets est de pouvoir interroger leurs propriétés plus tard. Après que tous les éléments ont été poussés sur le tableau, nous bouclons et de rendre à chacun en fonction de leurs propriétés.

lorsque l'événement click est déclenché, le code boucle à travers les éléments et détermine si le clic était sur l'un des éléments dans le tableau elements . Si c'est le cas, il lance un alert() , qui pourrait facilement être modifié pour faire quelque chose comme supprimer l'élément du tableau, auquel cas vous auriez besoin d'une fonction render pour mettre à jour le canvas .

pour être complet, Pourquoi vos tentatives n'ont pas fonctionné...

elem.onClick = alert("hello world"); // displays alert without clicking

c'est assignant la valeur de retour de alert() à la onClick propriété de elem . Elle invoque immédiatement le alert() .

elem.onClick = alert('hello world');  // displays alert without clicking

en JavaScript, les ' et " sont sémantiquement identiques, le lexer utilise probablement ['"] pour les citations.

elem.onClick = "alert('hello world!')"; // does nothing, even with clicking

vous assignez une chaîne de caractères à la onClick propriété de elem .

elem.onClick = function() { alert('hello world!'); }; // does nothing

JavaScript est le cas sensible. La propriété onclick est la méthode archaïque de fixation des gestionnaires d'événements. Il permet seulement un événement d'être attaché à la propriété et l'événement peut être perdu lors de la sérialisation du HTML.

elem.onClick = function() { alert("hello world!"); }; // does nothing

de nouveau, ' === " .