0

我有以下 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' 是我<p></p>在我的 HTML 中为 HTML 标记提供的 ID <body></body>。'tips' 是一个数组，其中的每个元素都包含一些文本。

每当光标位于我的 if 语句指定的位置时，我想显示存储在该数组的位置 34 中的文本。我知道该函数有效，因为console.log(tips[34]);只要光标位于该位置，该行就会在控制台中显示该数组元素的内容。但是由于某种原因，段落中的文本没有更新以显示该数组元素的内容。

谁能弄清楚这是为什么？

我从mousemoveKineticJS 库的本地副本的函数中调用该函数。我正在使用该库的本地副本，因为我想对其功能进行一些细微的调整，例如这个。'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);
    }
}
4

0 回答 0