0

我正在使用 JavaScript 从网页中创建和删除元素。我已经让它在除 Firefox 之外的所有浏览器中工作。在 Firefox 中，它将创建元素、删除元素、重新创建元素，但在重新创建元素后，它会返回“未找到”类型错误，指出该元素不存在并且它主要卡在屏幕上观点。

这将创建图像：

function createMOImage( objId )
{
    var img = document.createElement('img');
    var leftOffset = document.getElementById( objId ).offsetLeft;

    img.src = 'images/pre-butt-mo.png';
    img.style.position = 'absolute';
    img.style.left = leftOffset + "px";
    img.style.opacity = '0.2';
    img.style.zindex = '9';
    img.id = 'temp';
    img.onmouseout = function () { moff( objId ); };

    return img;
}

如您所见，创建的图像有一个调用此函数的鼠标移出事件：

function moff( objId )
{
    var container = document.getElementById( 'container' );
    var temp = document.getElementById( 'temp' );

    removeMOImage( );
    changeButt( objId );

    return;
}

change 函数工作得很好，但它没有被调用，因为 JavaScript 在removeMOImage()函数中被终止：

function removeMOImage(  )
{
    if ( img = document.getElementById('temp') )
    {
        img.parentNode.removeChild( temp );
    } else {
        return;
    }
}

removeChild尽管元素已在 create 函数中成功重新创建，但该函数返回 not found。

我在 IE Chrome Opera 和 Firefox 中进行了测试，唯一有问题的是 Firefox。我还必须克服其他一些 FF 特定问题，其中大部分是通过其他堆栈溢出线程解决的；但是，我找不到解决此问题的方法。

这是来自源代码的完整 JavaScript c&p：

function mon( objId )
{

    var container = document.getElementById( 'container' );
    var img = createMOImage( objId );

    container.appendChild( img );
    changeButt( objId );

    return;
}

function moff( objId )
{
    var container = document.getElementById( 'container' );
    var temp = document.getElementById( 'temp' );

    removeMOImage( );
    changeButt( objId );

    return;
}

function createMOImage( objId )
{
    var img = document.createElement('img');
    var leftOffset = document.getElementById( objId ).offsetLeft;

    img.src = 'images/pre-butt-mo.png'; // change image names to match button ID's
    img.style.position = 'absolute';
    img.style.left = leftOffset + "px";
    img.style.opacity = '0.2';
    img.style.zindex = '9';
    img.id = 'temp';
    img.onmouseout = function () { moff( objId ); };

    return img;
}

function removeMOImage(  )
{

    // find cross browser approach. General consensus is to use remove child from the parent div reference but there are alot of issues.
    // Also have issue with mouse moving over the element causing the element to be deleted even though the mouse never actually leaves the element.

    // Best Hypothesized solution - move the mouseout event to the MO image
    // Confirmed solution for Chrome and IE but FF will only delete the image after the first MOut, after recreating the element it stays perminantly
    if ( img = document.getElementById('temp') )
    {
        img.parentNode.removeChild( temp );
    } else {
        return;
    }

}

function changeButt( objId )
{
    var img = document.getElementById( objId );
    var imginv = document.getElementById( objId + "inv" );
    var temp = document.getElementById( 'temp' );

    if ( temp != null )
    {
        img.src = "images/blank-butt.png";
        imginv.src = "images/blank-butt-inv.png";
        return;
    } else {
        img.src = "images/" + objId + ".png";
        imginv.src = "images/" + objId + "inv.png";
        return;
    }    
}

目的是在另一个图像上创建一个图像，并在鼠标从新创建的图像（比原始图像大）上移开时删除该图像。如果能解决这个问题，将不胜感激。我真的不想用闪光灯。

另一个问题是 opacity 属性似乎在 IE 中不起作用。除非这里有人有任何想法，否则我将独自解决该解决方案。如果可能的话，有人会在 safari 上进行心理测试吗？无权访问 Mac。

*我为这些愚蠢的笔记道歉，它们是为了在我离开电脑时帮助我跟踪。

[编辑] 我修复了不透明度问题。[编辑] 通过创建一个额外的变量解决了这个问题。

4

1 回答 1

1

这是一个范围界定问题。您在一个函数中定义临时变量并尝试在另一个函数中引用它。

function moff( objId ) {
    var container = document.getElementById( 'container' );


    removeMOImage( );
    changeButt( objId );
}


function removeMOImage(  ) {
    var temp = document.getElementById( 'temp' );

    if ( temp ) {
        temp.parentNode.removeChild( temp );
    }
}

你也不需要最后的return陈述。如果您不提前退出或返回值，那么您无论如何都在模仿解释器为您所做的事情。

于 2012-08-10T23:26:26.420 回答