Les objets JavaScript: 'addEventListener n'est pas une fonction"
J'ai créer un tableau d'objets JavaScript appelée éléments et boucle à travers elle dans le but de tirer chacun sur une toile ainsi que de brancher un peu de gestionnaires d'événements. Cependant, je reçois un message d'erreur indiquant que
'Uncaught TypeError: elements[i].addEventListener is not a function'
Voici le code:
$(document).ready(onDocumentReady);
function onDocumentReady() {
var COLOR_NORMAL = '#005A84';
var COLOR_SELECTED = '#00F2F2';
var COLOR_MOUSEOVER = '#5BA621';
var canvas = document.getElementById("mapCanvas");
var context = canvas.getContext('2d');
var data = @Html.Raw(Json.Encode(Model.DiePrintList));
var elem =
canvas,
left = elem.offsetLeft,
top = elem.offsetTop,
context = elem.getContext('2d'),
elements = [];
for (var i = 0; i < data.length; i++) {
elements.push({
color: '#0489B1',
width: 15,
height: 15,
row: data[i].Row,
col: data[i].Col,
top: data[i].Row * 20,
left: data[i].Col * 20
});
}
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', function(event) {
var hitElement = getHitElement(elements, event.pageX - left, event.pageY - top);
hitElement.color = COLOR_SELECTED;
drawElement(context, hitElement);
}, false);
elements[i].addEventListener('mouseover', function(event) {
var hitElement = getHitElement(elements, event.pageX - left, event.pageY - top);
hitElement.color = COLOR_MOUSEOVER;
drawElement(context, hitElement);
}, false);
elements[i].addEventListener('mouseout', function(event) {
var hitElement = getHitElement(elements, event.pageX - left, event.pageY - top);
hitElement.color = COLOR_SELECTED;
drawElement(context, hitElement);
}, false);
drawElement(context, elements[i]);
}
}
function drawElement(context, element) {
context.fillStyle = element.color;
context.fillRect(element.left, element.top, element.width, element.height);
}
function getHitElement(elements, x, y) {
var hitElement;
for (var i = 0; i < elements.length; i++) {
if (y > elements[i].top && y < elements[i].top + elements[i].height &&
x > elements[i].left && x < elements[i].left + elements[i].width) {
hitElement = elements[i];
}
}
return hitElement;
}
Pourquoi est-il que je ne peut pas brancher un gestionnaire d'événement pour chaque élément?
"
anyFunction
n'est pas une fonction" signifie que anyFunction
ne fait pas partie de l'objet d'où son nom.
OriginalL'auteur kformeck | 2015-06-19
Vous devez vous connecter pour publier un commentaire.
Votre erreur spécifique:
est parce que
elements[i].addEventListener
estundefined
et n'est donc pas une fonction. La raison pour laquelle il estundefined
est parce que votreelements
tableau contient régulièrement des objets Javascript. Ces objets n'ont pas de.addEventListener()
méthode. C'est une méthode sur les objets DOM qui sont unEventTarget
, non pas de façon régulière les objets Javascript (sauf si vous faites votre propre méthode appeléeaddEventListener
et l'ajouter à vos objets Javascript).Car je ne vois pas de tableau correspondant des éléments du DOM dans votre code, il semble que vous essayez de joindre eventListeners de rectangles que vous dessinez sur votre Toile, qui n'est pas quelque chose que vous pouvez faire dans ce sens. T " il des choses que vous avez tiré sur un Canvas sont fondamentalement comme une image bitmap. Il ne conserve pas une connaissance des objets qui vous a attiré sur elle d'autre que la résultante de pixels. Vous en inspirer et le résultat est de pixels sur la toile, pas une persistante ensemble d'objets tels que les objets DOM. Si vous souhaitez par la suite de faire frapper des tests contre les choses que vous avez dessiné sur la toile, alors, vous auriez à mettre un eventListener sur la toile objet lui-même pour obtenir l'entrée de l'événement, de garder trace de ce que l'objet que vous avez dessiné, où sur la toile et puis lorsque l'événement se déclenche sur votre toile à l'écoute, vous pouvez faire de votre succès de test par rapport à celle des données de ce que vous placez où.
OriginalL'auteur jfriend00
Vous créons un tableau de base des objets javascript. Qui n'ont pas la méthode addEventListener qui ne sont utilisés que dans EventTarget objets.
Oeil à cette question pour avoir une idée sur la manière de faire ce que vous voulez faire
OriginalL'auteur Illyism
Que vous essayez de joindre
EventListener()
à des objets qui ne sont pas en charge les événements.De les docs:
Ce que vous appelez
elements
ne correspond à aucun des critères ci-dessus.OriginalL'auteur PM 77-1