替换HTML p标记的innerHTML - 事件未触发

时间:2013-03-08 16:36:00

标签: javascript javascript-events html5-canvas mousemove

我有以下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);
    }
}

0 个答案:

没有答案