原型观察者没有在 IE8 中触发答案

【问题标题】：prototype observers not firing in IE8原型观察者没有在 IE8 中触发
【发布时间】：2011-07-06 05:25:03
【问题描述】：

我无法弄清楚是什么导致 IE8 忽略这些观察者。它适用于 FF、Chrome (10) 和 Safari。它永远不会到达 IE8 开发者工具中设置的断点。

<script type="text/javascript">
//<![CDATA[
    var timeoutHolder = null;
    function displayZoom(id){
        window.clearTimeout(timeoutHolder);  //if we are coming from another hover target, prevent the opacity reset
        if($('mini-main').getOpacity()!=0.4)
            new Effect.Opacity('mini-main',{from:1.0,to:0.4,duration:0.5});
        new Effect.Appear(id,{duration:0.3});
    }
    function resetZoom(id){
        timeoutHolder = window.setTimeout(function(){
            new Effect.Opacity('mini-main',{from:0.4,to:1.0,duration:0.5});
        }, 100);    //gives us 100 ms for user to move onto another target before we reset the opacity
        new Effect.Fade(id,{duration:0.5});
    }
    $$('.mini-target').each(function(target_div){
        target_div.observe('mouseover',function(){
            displayZoom(target_div.id+'-hover');
        });
        target_div.observe('mouseout',function(){
            resetZoom(target_div.id+'-hover');
        });
    });
//]]>
</script>

相关的phtml是：

        <img src="<?php echo Mage::getBaseUrl('media').'Main.jpg'?>" id="mini-main"/>
            <div id="mini-target-1" class="mini-target"></div>
            <div id="mini-target-2" class="mini-target"></div>
            <div id="mini-target-3" class="mini-target"></div>
            <div id="mini-target-4" class="mini-target"></div>

            <div id="mini-target-1-hover" class="mini-hover" style="display:none">
                <img src="<?php echo Mage::getBaseUrl('media').'mini-rollover-1.png'?>"/>
            </div>
            <div id="mini-target-2-hover" class="mini-hover" style="display:none">
                <img src="<?php echo Mage::getBaseUrl('media').'mini-rollover-2.png'?>"/>
            </div>
            <div id="mini-target-3-hover" class="mini-hover" style="display:none">
                <img src="<?php echo Mage::getBaseUrl('media').'mini-rollover-3.png'?>"/>
            </div>
            <div id="mini-target-4-hover" class="mini-hover" style="display:none">
                <img src="<?php echo Mage::getBaseUrl('media').'mini-rollover-4.png'?>"/>
            </div>

我也尝试过单独附加观察者（没有each），但这没有任何区别：

    $('mini-target-2').observe('mouseover',function(){
            displayZoom('mini-target-2-hover');
    });
    $('mini-target-2').observe('mouseout',function(){
            resetZoom('mini-target-2-hover');
    });

谢谢，
京东

【问题讨论】：

顺便说一句，这是原型 v1.6.0.3

标签： javascript internet-explorer prototypejs observer-pattern

【解决方案1】：

最骇人听闻的骇客。如果您在mini-target div 上设置背景，它会起作用。我最终使用 IE 的条件 setStyle 来显示间隔 gif。 1998 年浏览器破解 FTW！！！

if(Prototype.Browser.IE){
     target_div.setStyle({background: 'url("<?php echo Mage::getBaseUrl('media').'spacer.gif'?>")'});
}

如果有人能解释为什么 IE 需要背景来触发观察者，我很乐意接受他们的回答...可能与 hasLayout 相关？

【讨论】：

【解决方案2】：

我之前遇到过一个案例，其中一组 ID 名称导致 IE 中出现 Javascript 问题。

该方案由紧跟在连字符 - 之后的数字组成。

尝试删除数字前的连字符。将mini-target-1 更改为mini-target1？

【讨论】：

谢谢艾伦，我会试试的。我知道以数字开头的 ID 或类名是非法的，但没有听说过这种变化，但是嘿，它是 IE，所以一切皆有可能！

【解决方案3】：

如果你改变你做这件事的方式会怎么样：

$(document).ready(function () {
    $('.mini-target').mouseover(function () {
        displayZoom($(this).attr("id") + '-hover');
    }).mouseout(function () {
        resetZoom($(this).attr("id") + '-hover');
    });
});

当您将鼠标悬停在每个“迷你目标”上时，您仍然在引用它，我们将鼠标移出链接到它的末尾。

这将在 IE8 中运行。

干杯，铝

【讨论】：

您正在为涉及原型的问题提供 jquery 解决方案

【解决方案4】：

当observe 没有在隐藏元素上触发时，我遇到了这个问题。我所要做的就是在使用 observe 之前创建该元素 display:block;。

如果您的元素最初设置为display:none;，那么当您更改背景图片时，IE8（及以下）可能会自动将css显示属性更改为block。

【讨论】：