наблюдатели за прототипом не стреляют - PullRequest
Новая
       25

наблюдатели за прототипом не стреляют

1 голос
/ 01 марта 2011

Я не могу понять, что заставляет IE8 игнорировать этих наблюдателей. Работает в FF, Chrome (10) и Safari. Он никогда не достигает точек останова, установленных в IE8 Developer Tools. 

<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');
    });

Спасибо
JD

Ответы [ 4 ]

2 голосов
/ 01 марта 2011

Самый хакерский из хаков. Это работает, если вы установили фон для элементов mini-target. Я закончил тем, что использовал условный setStyle для IE, чтобы отобразить пробел GIF. 1998 браузер взломал FTW !!! 

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

Если кто-нибудь может объяснить, почему IE нужен фон для запуска Обозревателя, я был бы рад принять их ответ ... Возможно, что-то связанное с hasLayout?

2 голосов
/ 01 марта 2011

Ранее у меня был случай, когда набор имен ID вызывал проблемы с Javascript в IE.

Схема состояла из чисел сразу после дефиса -.

Попробуйте удалить дефисперед номером.Измените mini-target-1 на mini-target1?

1 голос
/ 21 августа 2013

У меня была эта проблема, когда observe не стрелял по скрытому элементу. Все, что мне нужно было сделать, чтобы заставить его работать, это сделать этот элемент display:block; перед использованием observe.

Если ваш элемент изначально установлен на display:none;, то при изменении фонового изображения IE8 (и ниже) может автоматически изменять свойство отображения css на block.

1 голос
/ 01 марта 2011

Что если вы измените способ, которым вы это делаете, то это будет выглядеть так: 

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

Вы по-прежнему ссылаетесь на каждую "мини-мишень" при наведении на нее курсора мыши, и мы связываем мышку до конца.

Это будет работать в IE8.

Ура, Al

...