我有以下JS函数,我用它来检测光标悬停在HTML5画布上的特定图像上时:
function cursorOverAssetsBox(mouseX, mouseY){
if((mouseX >= assetsDescriptionBox.img_x && mouseX <= assetsDescriptionBox.img_x + assetsDescriptionBox.img_width) &&
(mouseY <= assetsDescriptionBox.img_y && mouseY >= assetsDescriptionBox.img_y - assetsDescriptionBox.img_height))
document.getElementById('tipsParagraph').innerHTML = tips[34];
console.log(tips[34]);
}
该功能正常,但由于某种原因,行
document.getElementById('tipsParagraph').innerHTML = tips[34];
似乎没有被解雇......
'tipsParagraph'是我在HTML <p></p>
中为HTML <body></body>
标记提供的ID。 'tips'是一个数组,每个元素都包含一些文本。
每当光标位于if语句指定的位置时,我想显示存储在该数组位置34的文本。我知道该函数有效,因为只要光标位于该位置,行console.log(tips[34]);
就会在控制台中显示该数组元素的内容。但由于某种原因,段落中的文本未更新以显示该数组元素的内容。
任何人都可以找出原因吗?
我在KineticJS库的本地副本的mousemove
函数内调用该函数。我正在使用该库的本地副本,因为我想对其功能进行一些轻微的调整,例如这个。 'mousemove'功能目前看起来像这样:
_mousemove: function(evt) {
this._setUserPosition(evt);
var dd = Kinetic.DD;
var obj = this.getIntersection(this.getUserPosition());
getMousePosition(evt);
document.getElementById('mouseLocation').innerHTML = "mouseX = " + evt.clientX + ". mouseY = " + evt.clientY;
/*Add an if statement, so that cursorOverAssetsBox function is only called when the cursor's y value is greater than
400. This will improve performance, as the code will only check if it needs to call the function when the cursor is
below that line. */
if(mouseY >= 400){
cursorOverAssetsBox(mouseX, mouseY);
}
/*Write an if statement that says, "if 'draggingImage' variable is set to true, check the x & y of that image to see if
it's over its description box- if it is, do something, if not, don't", if 'draggingImage' variable is not set
to true, don't check.*/
//cursorOverAssetsBox(mouseX, mouseY);
if(obj) {
var shape = obj.shape;
if(shape) {
if((!dd || !dd.moving) && obj.pixel[3] === 255 && (!this.targetShape || this.targetShape._id !== shape._id)) {
if(this.targetShape) {
this.targetShape._handleEvent('mouseout', evt, shape);
this.targetShape._handleEvent('mouseleave', evt, shape);
}
shape._handleEvent('mouseover', evt, this.targetShape);
shape._handleEvent('mouseenter', evt, this.targetShape);
this.targetShape = shape;
}
else {
shape._handleEvent('mousemove', evt);
}
}
}
/*
* if no shape was detected, clear target shape and try
* to run mouseout from previous target shape
*/
else if(this.targetShape && (!dd || !dd.moving)) {
this.targetShape._handleEvent('mouseout', evt);
this.targetShape._handleEvent('mouseleave', evt);
this.targetShape = null;
}
// start drag and drop
if(dd) {
dd._startDrag(evt);
}
}